/**
 * tokens.css
 * ============================================================
 * デザイントークン定義(CSS変数)
 *
 * 値はすべて暫定値。fujiwara-grafさんのデザインが
 * 確定した時点でこのファイルだけを書き換えれば、
 * サイト全体のトーンが一斉に変わる。
 *
 * 設計方針:
 * - 医療系の信頼感を表現する落ち着いた配色
 * - グラデーションは使わない
 * - アクセントは深いブルー系(赤系は医療広告で警戒される印象を避ける)
 * - 余白は8px基準のスケール
 * - タイポグラフィはモバイル基準でレスポンシブに
 * ============================================================
 */

:root {

  /* --------------------------------------------------- */
  /* Color: ベース */
  /* --------------------------------------------------- */
  --color-bg:              #FFFFFF;
  --color-bg-subtle:       #F7F7F4;   /* 軽くベージュ寄りの白 */
  --color-bg-section:      #F4F2EC;   /* セクション背景の交互配色用 */

  --color-text:            #1F2937;   /* 本文 */
  --color-text-soft:       #4B5563;   /* 補足・キャプション */
  --color-text-muted:      #9CA3AF;   /* ラベル・メモ */

  --color-border:          #E5E7EB;
  --color-border-strong:   #D1D5DB;


  /* --------------------------------------------------- */
  /* Color: ブランド・アクセント */
  /* --------------------------------------------------- */
  --color-primary:         #1E3A5F;   /* 深いブルー(医療系の信頼) */
  --color-primary-hover:   #15294A;
  --color-primary-light:   #4A6B8A;
  --color-primary-bg:      #EDF2F7;   /* primaryの淡いバリエーション */

  --color-accent:          #C9A86A;   /* 落ち着いた金茶(差し色) */
  --color-accent-hover:    #B38F4F;


  /* --------------------------------------------------- */
  /* Color: ステート */
  /* --------------------------------------------------- */
  --color-link:            var(--color-primary);
  --color-link-hover:      var(--color-primary-hover);

  --color-focus-ring:      #4D90FE;   /* :focus-visible 用 */


  /* --------------------------------------------------- */
  /* Typography: フォントファミリー */
  /* --------------------------------------------------- */
  --font-sans:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    "Yu Gothic Medium",
    "YuGothic",
    Meiryo,
    sans-serif;

  --font-serif:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "Noto Serif JP",
    serif;

  --font-mono:
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;


  /* --------------------------------------------------- */
  /* Typography: フォントサイズ(モバイルベース) */
  /* --------------------------------------------------- */
  --fs-xs:     0.75rem;   /* 12px */
  --fs-sm:     0.875rem;  /* 14px */
  --fs-base:   1rem;      /* 16px */
  --fs-md:     1.125rem;  /* 18px */
  --fs-lg:     1.25rem;   /* 20px */
  --fs-xl:     1.5rem;    /* 24px */
  --fs-2xl:    1.75rem;   /* 28px */
  --fs-3xl:    2rem;      /* 32px */
  --fs-4xl:    2.5rem;    /* 40px */
  --fs-5xl:    3rem;      /* 48px */


  /* --------------------------------------------------- */
  /* Typography: line-height・letter-spacing */
  /* --------------------------------------------------- */
  --lh-tight:    1.3;
  --lh-snug:     1.5;
  --lh-normal:   1.7;     /* 日本語本文の基本 */
  --lh-relaxed:  1.9;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;


  /* --------------------------------------------------- */
  /* Spacing(8px基準) */
  /* --------------------------------------------------- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */


  /* --------------------------------------------------- */
  /* Layout */
  /* --------------------------------------------------- */
  --container-max:     1100px;
  --container-padding: var(--space-5);

  --section-y-mobile:  var(--space-16);
  --section-y-desktop: var(--space-24);


  /* --------------------------------------------------- */
  /* Radius */
  /* --------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;


  /* --------------------------------------------------- */
  /* Shadow */
  /* --------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.10);


  /* --------------------------------------------------- */
  /* Transition */
  /* --------------------------------------------------- */
  --transition-fast:   150ms ease-out;
  --transition-base:   250ms ease-out;
  --transition-slow:   400ms ease-out;


  /* --------------------------------------------------- */
  /* Breakpoints(参考用、@media内で直接px指定) */
  /* --------------------------------------------------- */
  /* sm: 480px / md: 768px / lg: 1024px / xl: 1280px */
}


/* --------------------------------------------------- */
/* Tablet以上で本文サイズを微増 */
/* --------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --fs-base:   1.0625rem;  /* 17px */
    --fs-md:     1.1875rem;  /* 19px */
  }
}