@charset "UTF-8";
/* ============================================================
   tokens.css ― LUMINA 接骨院・鍼灸院
   出典：handoff/TOKENS.md（1〜5章）。★この値以外を使わない。
   色を変えるのはこのファイル1枚だけ（REPLACE_GUIDE.md 4章）。

   ⚠ 背景色と文字色は必ず対で使う。使ってよい対は TOKENS.md 1-1 の表。
   ⚠ --gold / --gold-light に文字を載せない（線・記号・枠の専用色）。
   ⚠ opacity で色を薄めない。hover は必ず「濃く」する。
   ============================================================ */

:root {
  /* ── 面 ───────────────────────────── */
  --base:         #F7F4ED;  /* ページの地色（アイボリー） */
  --white:        #FFFFFF;  /* カード面・交互に敷く地 */
  --ink:          #3B372F;  /* ★文字にも面にも使う。予約CTA帯の背景 */
  --gold-pale:    #F1EBDD;  /* 「保険適用」タグの背景 */

  /* ── 文字 ─────────────────────────── */
  --ink-body:     #55503F;  /* 本文 */
  --ink-sub:      #6E6659;  /* 業種表記 */
  --ink-weak:     #776C5E;  /* 補足・日付・ナビ和文・パンくずHOME */
  --ink-faint:    #8C8071;  /* リンクでない装飾テキスト専用（3:1の対象） */
  --ink-faint-dark: #B7AC9E;/* 濃色帯 --ink の上でだけ使う */

  /* ── ブランド（ゴールド） ─────────────── */
  --gold:            #A98F55;  /* 面と線の専用。★文字を載せない */
  --gold-deep:       #856A2E;  /* 文字とCTA背景 */
  --gold-deep-hover: #6E5620;  /* CTAの hover。★必ず濃くする */
  --gold-darker:     #7E6428;  /* --gold-pale の上に載せる文字 */
  --gold-light:      #C8B67E;  /* 番号01-05・短い横線。★文字を載せない */

  /* ── 線 ───────────────────────────── */
  --line:         #E5DFD1;  /* 罫線（最頻） */
  --line-strong:  #D8CDB6;  /* チップ・電話ボタンの枠 */
  --line-pale:    #EFEAE0;  /* ロゴ板の枠 */

  /* ── 状態 ─────────────────────────── */
  --disabled:     #948A78;  /* 診療時間表の休診「−」（図形。3:1） */
  --red:          #B34A42;  /* 診療時間表の「日祝」 */
  --placeholder:  #948A78;  /* フォームの例示文 */

  /* ── 影 ───────────────────────────── */
  --shadow-plate:  0 14px 34px rgba(59, 55, 47, .10);
  --shadow-fixed:  0 6px 24px rgba(59, 55, 47, .10);
  --fixed-bg:      rgba(255, 255, 255, .97);

  /* ── フォーカスリング（★変更禁止） ─────────
     デジタル庁デザインシステム v2.17.0 の正式な重ね方。
       内：Yellow-300 #FFD43D を 2px（box-shadow）
       外：Black     #000000 を 4px（outline、offset 2px）
     ★単色にしない。単色 --gold-deep はWEB予約ボタンと同色で 1.00:1 になり消える
       （handoff/CONFLICTS.md 衝突2 ／ focus_check.webp）。
     ⚠ ここだけは配色トークン（--gold 系）と無関係。買い手が色を変えても触らない。 */
  --focus-inner:  #FFD43D;
  --focus-outer:  #000000;
  --focus-radius: 4px;

  /* ── 書体（TOKENS.md 2章） ───────────── */
  --font-en:   'Cormorant Garamond', serif;                     /* 英字・数字 */
  --font-head: 'Shippori Mincho', serif;                        /* 見出し（和文） */
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans',
               'Yu Gothic', sans-serif;                         /* 本文（和文） */

  /* サイズ（固定）★12 / 14 / 20 と clamp() の見出しだけ。10・11・13pxは使わない */
  --fs-12: 12px;  /* 注記・パンくず・コピーライト・ナビ和文・タグ・バッジ */
  --fs-14: 14px;  /* ★本文。カード本文・料金の品目・ナビ英字 */
  --fs-20: 20px;  /* 料金の金額・固定ヘッダーのロゴ */

  /* サイズ（可変） */
  --fs-h2-en:    clamp(32px, 5vw, 44px);    /* セクション見出しの英字 */
  --fs-h1-page:  clamp(34px, 5vw, 52px);    /* ページヘッダーの英字 */
  --fs-h1-hero:  clamp(28px, 4.2vw, 40px);  /* TOPヒーロー（縦書き） */
  --fs-h2-lg:    clamp(34px, 4vw, 42px);
  --fs-h3:       clamp(20px, 2.6vw, 26px);
  --fs-h4:       clamp(17px, 2vw, 19px);

  /* 字送り */
  --ls-body: .06em;  --ls-body-wide: .08em;
  --ls-head: .1em;   --ls-head-wide: .12em;
  --ls-en:   .2em;   --ls-en-wide:   .26em;
  --ls-en-x: .3em;   --ls-en-xx:     .34em;   /* SCROLL / RESERVATION */

  /* 行送り */
  --lh-num:  1;      /* 数字（01 等）専用 */
  --lh-head: 1.9;
  --lh-body: 2.1;
  --lh-long: 2.3;

  /* ウェイト。★この3段しか使わない。太字を使わない */
  --fw-light:  300;  /* 本文 */
  --fw-normal: 400;  /* 英字見出し */
  --fw-medium: 500;  /* 和文見出し */

  /* ── 余白・レイアウト（TOKENS.md 3章） ─── */
  --pad-section:   clamp(64px, 10vw, 110px) clamp(20px, 5vw, 48px);
  --pad-section-x: clamp(20px, 5vw, 48px);
  --w-content:     1080px;   /* 標準 */
  --w-narrow:      880px;    /* 料金・FAQ・プライバシー */
  --w-cta:         720px;    /* 予約CTA帯 */
  --gap-card:      clamp(28px, 4vw, 40px);
  --gap-col:       clamp(32px, 6vw, 72px);
  --mb-heading:    64px;     /* セクション見出しの下 */

  /* ── 罫線・角丸・ボタン（TOKENS.md 4章） ── */
  --border:        1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);
  --radius-cta:    2px;      /* CTAボタン */
  --radius-chip:   999px;    /* チップのみ */
  --rule-w:        40px;     /* 見出しの短い横線。44/48/56 も使う */
  --rule-h:        1px;

  /* ── レスポンシブ（TOKENS.md 5章） ────────
     唯一の分岐点。@media では変数が使えないので数値も 1279px で直書きする。
     ★ナビの項目を増やすか、ラベルを大きくしたら、この値を見直す。 */
  --bp-mobile: 1279px;

  /* 固定ヘッダーの高さ。アンカーの scroll-margin-top と揃える */
  --h-fixed-header: 68px;
}