/* ============================================================
   tokens.css
   整体院hare デモサイト — デザイントークン定義
   カラー・タイポグラフィ・余白等のCSSカスタムプロパティのみを定義する。
   参照元：docs/03_デザイン定義書.md
   ライト固定（prefers-color-schemeには反応させない）。
   ============================================================ */

:root {
  /* ---- 色（§2.1。値は変更しない） ---- */
  --c-navy-deep: #0F1A2B;
  --c-navy: #17263D;
  --c-ivory: #F7F4EF;
  --c-ivory-dim: #EDE8E0;
  --c-wood: #8A6A4B;
  --c-wood-light: #C4A882;
  --c-sky: #4A86B8;       /* 面・図版・アイコン専用。本文文字に使用禁止 */
  --c-sky-deep: #2A5F88;  /* 文字・リンク用。オフホワイト系背景限定 */
  --c-text: #1C2331;
  --c-text-muted: #4A5464; /* アイボリー系背景限定。ネイビー背景では使用しない */

  /* ---- 書体（§1・§3） ---- */
  --ff-heading: "Zen Old Mincho", serif;
  --ff-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;

  /* ---- フォントサイズ／行間／字間（§3.1）
     モバイル基準値。lg(900px)以上は本ファイル末尾のメディアクエリでPC値へ上書きする。 ---- */
  --fs-h1: 2rem;       /* 32px */
  --lh-h1: 1.5;
  --ls-h1: 0.03em;

  --fs-h2: 1.5rem;     /* 24px（SP推奨20-24pxの上限） */
  --lh-h2: 1.5;
  --ls-h2: 0.02em;

  --fs-h3: 1.1875rem;  /* 19px（SP推奨18-20px） */
  --lh-h3: 1.6;
  --ls-h3: 0.02em;

  --fs-h4: 1rem;       /* 16px */
  --lh-h4: 1.6;
  --ls-h4: 0.02em;

  --fs-body: 1rem;      /* 16px（本文の下限） */
  --lh-body: 1.8;
  --ls-body: 0.02em;

  --fs-note: 0.8125rem; /* 13px。最小12pxの推奨を上回る */
  --lh-note: 1.7;
  --ls-note: 0.02em;

  --fs-btn: 0.9375rem; /* 15px */
  --lh-btn: 1;
  --ls-btn: 0.04em;

  --fs-infobar: 0.875rem; /* 14px */
  --lh-infobar: 1.5;
  --ls-infobar: 0.02em;

  /* ---- 余白スケール（§4。8px基準） ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 80px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- ブレイクポイント（§5。コメント併記用）
     CSSのカスタムプロパティはメディアクエリの条件には使えないため、
     実際の @media では直値（600px/900px/1200px）を書く。 ---- */
  --bp-md: 600px;
  --bp-lg: 900px;
  --bp-xl: 1200px;
  --content-max: 1120px; /* .u-container の max-width */

  /* ---- 角丸（§6.5） ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;

  /* ---- 影（§6.5・§7） ---- */
  --shadow-card: 0 2px 8px rgba(23, 38, 61, 0.08);
  --shadow-card-hover: 0 8px 20px rgba(23, 38, 61, 0.14);
  --shadow-ctabar: 0 -2px 12px rgba(23, 38, 61, 0.16);

  /* ---- アニメーション時間／イージング（§6.5・§8.1で明示された共通トークンのみ。
     個別演出（ボタンhover・FAQ開閉・CTAバー等）の時間値は各コンポーネント側に直値で書く） ---- */
  --dur-fade: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- z-index（§6.5 確定値） ---- */
  --z-base: 0;
  --z-map-overlay: 5;
  --z-header: 10;
  --z-ctabar: 20;
  --z-skiplink: 100;
}

/* md（600px）以上：タブレット帯。
   参照した推奨値（本文14-18px／H2 22-26px／H3 18-22px）に合わせる。 */
@media (min-width: 600px) {
  :root {
    --fs-h1: 2.375rem;  /* 38px */
    --lh-h1: 1.45;
    --fs-h2: 1.625rem;  /* 26px */
    --fs-h3: 1.25rem;   /* 20px */
    --fs-body: 1rem;    /* 16px */
    --fs-note: 0.875rem; /* 14px */
    --fs-infobar: 0.9375rem; /* 15px */
    --fs-btn: 1rem;
  }
}

/* lg（900px）以上：PC帯。
   参照した推奨値（本文16-18px／H2 24-28px／H3 20-24px）に合わせる。 */
@media (min-width: 900px) {
  :root {
    --fs-h1: 2.875rem;  /* 46px。ヒーローのキャッチのため推奨上限より大きく取る */
    --lh-h1: 1.4;
    --ls-h1: 0.02em;

    --fs-h2: 1.75rem;   /* 28px */
    --lh-h2: 1.45;

    --fs-h3: 1.375rem;  /* 22px */

    --fs-h4: 1.125rem;  /* 18px */

    --fs-body: 1.0625rem; /* 17px */
    --lh-body: 1.9;

    --fs-btn: 1rem;

    --fs-note: 0.875rem;    /* 14px */
    --fs-infobar: 1rem;     /* 16px */
  }
}