/* ==========================================================================
   tokens.css — サイト全体の「見た目の設定値」
   色・余白・文字サイズ・角丸・影は、すべてこのファイルに集約してある。
   ここの数値を変えるだけで、サイト全体の印象を変えられる。
   （style.css には、この変数を使ったレイアウトだけが書いてある）

   配色の根拠: 現行ロゴ「TA」の濃紺とブルーをそのままブランドカラーにしている。
   オレンジは CTA だけに使い、他では使わない
   —「オレンジ＝問い合わせ」と閲覧者に覚えてもらうため。
   ========================================================================== */

:root {
  /* --- ブランド（ロゴ由来） -------------------------------------------- */
  --navy-900: #041d3b;   /* フッター背景 */
  --navy:     #062850;   /* ヘッダー・見出し・CTA帯 */
  --navy-600: #0a3a6e;   /* ネイビーの明るい方（グラデーションの終点） */
  --blue:     #076aa3;   /* リンク・アイコン・強調 */
  --blue-500: #037ab4;
  --blue-100: #e8f1f8;   /* セクション背景（ペールブルー） */
  --blue-050: #f5f9fc;

  /* --- CTA（この色は問い合わせ導線だけに使う） -------------------------- */
  --orange:     #e0803a;
  --orange-600: #c86f2c;
  --orange-050: #fdf3ec;

  /* --- サービス識別色 ---------------------------------------------------
     3つのサービス詳細ページは同じ骨格で、この色だけが変わる */
  --svc-app:      #076aa3;   /* クリニック専用アプリ */
  --svc-dx:       #17876f;   /* 医療DX導入支援 */
  --svc-douinavi: #e0803a;   /* ドウイナビ */

  /* --- グレー ------------------------------------------------------------ */
  --gray-900: #1f2933;   /* 本文 */
  --gray-600: #5a6572;   /* 補足 */
  --gray-400: #8593a2;   /* 注記・ラベル */
  --gray-300: #cfd8e3;   /* 罫線（強） */
  --gray-200: #e1e8f0;   /* 罫線 */
  --gray-050: #f7f8fa;   /* 薄い地色 */
  --white: #ffffff;

  --ink:           var(--gray-900);
  --ink-2:         var(--gray-600);
  --ink-3:         var(--gray-400);
  --ink-on-dark:   #eef4fa;
  --ink-2-on-dark: #a7bbcf;

  --bg:      var(--white);
  --bg-soft: var(--gray-050);
  --bg-pale: var(--blue-100);
  --bg-dark: var(--navy-900);
  --line:        var(--gray-200);
  --line-strong: var(--gray-300);

  /* --- 書体 --------------------------------------------------------------
     日本語は Noto Sans JP、英数字と数値は Barlow。
     数字を大きく見せるブロック（実績・料金）で Barlow が効く */
  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
          "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
          "BIZ UDPGothic", Meiryo, sans-serif;
  --disp: "Barlow", "Noto Sans JP", system-ui, sans-serif;

  /* 文字サイズ（画面幅に応じて滑らかに変わる） */
  --fs-hero:  clamp(1.9rem, 1.15rem + 3.1vw, 3.2rem);
  --fs-h2:    clamp(1.45rem, 1.05rem + 1.6vw, 2.2rem);
  --fs-h3:    clamp(1.05rem, 0.96rem + 0.42vw, 1.28rem);
  --fs-lead:  clamp(0.97rem, 0.92rem + 0.3vw, 1.12rem);
  --fs-body:  clamp(0.93rem, 0.9rem + 0.16vw, 1rem);
  --fs-small: 0.86rem;
  --fs-mini:  0.78rem;
  --fs-label: 0.72rem;   /* 英字ラベル（Section Label） */

  /* 日本語は欧文の定石より行間を広く取る */
  --lh-tight: 1.35;
  --lh-body:  1.9;

  /* --- 余白 -------------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --sp-section: clamp(64px, 7.5vw, 112px);

  /* --- 幅 ---------------------------------------------------------------- */
  --w-page:   1180px;
  --w-narrow: 780px;
  --gutter:   clamp(20px, 4.5vw, 40px);

  /* --- 角丸・影 ---------------------------------------------------------- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6, 40, 80, .06),
               0 2px 8px rgba(6, 40, 80, .05);
  --shadow-md: 0 1px 2px rgba(6, 40, 80, .06),
               0 12px 32px -12px rgba(6, 40, 80, .18);
  --shadow-lg: 0 2px 6px rgba(6, 40, 80, .07),
               0 28px 60px -20px rgba(6, 40, 80, .28);

  /* --- 動き -------------------------------------------------------------- */
  --ease: cubic-bezier(.22, .68, .31, 1);
  --dur:  .5s;

  /* ヘッダーの高さ（追従ヘッダーの分だけ本文を下げるのに使う） */
  --header-h: 116px;
  --header-h-stuck: 68px;
}