/* SITE 90 — CABARET FIRST VISIT / design tokens
   配色（担当仕様）: ホワイト #FFFFFF / ネイビー #27364A / ペールローズ #E8D2D6 / ブラス #A9864B
   角丸は 4px のみ（MASTER §8: 1サイト内で混在させない。83の8pxとは別値にして質感を分ける）
   影は2段階。面の区切りは罫線と背景差を主に使い、カードを一律に浮かせない。
   本文16px / 注記14px を最小値とする。

   コントラストの扱い（design-guide.md §6 / 4.5:1）
   - 指定色のブラス #A9864B は白地 3.4:1 のため、罫線・下線・28px以上の数字にのみ使う。
   - ブラス系で文字・下地を作るときは #7E5F27（白地 6.0:1 / 白文字 6.0:1）を使う。
   - ペールローズ #E8D2D6 は面と罫線専用。文字色には使わない。
   - 主要CTAはネイビー #27364A（白地 12.3:1）。「不安解消」が目的のため、
     最も可読性の高い色を最も重要な操作へ割り当てる。 */
:root {
  /* --- 面 --- */
  --c-bg: #FFFFFF;          /* ページ地（ホワイト） */
  --c-bg-2: #F7F4F1;        /* section--alt */
  --c-bg-3: #EFEAE4;        /* 表ヘッダ・キー列・タグ地 */
  --c-surface: #FFFFFF;     /* カード・入力欄・写真枠の内側 */

  /* --- 罫線 --- */
  --c-line: #E3DDD5;
  --c-line-strong: #C7BEB1;

  /* --- 文字 ---
     #27364A = 12.3:1（白）/ 10.0:1（#EFEAE4）
     #3E4C60 = 8.7:1（白）/ 7.1:1（#EFEAE4）
     #5A6675 = 5.8:1（白）/ 4.8:1（#EFEAE4） */
  --c-fg: #27364A;
  --c-fg-2: #3E4C60;
  --c-muted: #5A6675;

  /* --- アクセント（ネイビー＋ブラス＋ペールローズ） --- */
  --c-accent: #A9864B;          /* 罫線・下線・28px以上の数字にのみ使う */
  --c-accent-strong: #7E5F27;   /* ブラス系の文字・下地（4.5:1以上を満たす） */
  --c-accent-deep: #5E4518;     /* hover / 押下 */
  --c-accent-on: #FFFFFF;
  --c-accent-soft: #FAF6EE;     /* ブラスの淡い面 */
  --c-accent-line: #E5D8BF;

  --c-rose: #E8D2D6;            /* ペールローズ: 面と罫線専用 */
  --c-rose-soft: #FCF6F7;
  --c-rose-line: #EFDFE2;

  --c-primary: #27364A;         /* 主要CTA（ネイビー） */
  --c-primary-deep: #1A2534;
  --c-primary-on: #FFFFFF;

  --c-ok: #24684A;      /* 営業中・出勤あり（白地 6.7:1） */
  --c-off: #A2A9B2;     /* 休業・出勤なし（ドットのみ。文字には使わない） */
  --c-alert: #B3261E;   /* エラー（白地 5.9:1） */
  --c-focus: #27364A;

  /* --- 角丸（4px 単一） --- */
  --radius: 4px;

  /* --- 影（2段階） --- */
  --shadow-1: 0 1px 2px rgba(39, 54, 74, 0.08);
  --shadow-2: 0 20px 48px rgba(39, 54, 74, 0.18);

  /* --- 寸法 --- */
  --w-page: 1160px;
  --w-text: 720px;
  --h-header: 76px;   /* PC 64〜80px */
  --h-cta: 56px;      /* モバイル固定CTA 48〜56px */
  --tap: 44px;

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

  /* --- 文字サイズ（最小14px） --- */
  --fs-note: 14px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-h4: 18px;
  --fs-h3: 21px;
  --fs-h2: clamp(24px, 2.2vw, 29px);
  --fs-h1: clamp(27px, 3.2vw, 36px);
  --fs-display: clamp(28px, 3.6vw, 42px);

  --lh-tight: 1.36;
  --lh-normal: 1.6;
  --lh-long: 1.8;

  /* --- 書体（担当仕様: Noto Serif JP + Noto Sans JP） ---
     明朝は見出しと金額のみ。本文・UI・注記はゴシック。いずれもシステムフォントへ退避できる。 */
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho",
    "MS PMincho", serif;
  --font-num: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* --- モーション（1サイト1種類: fade-up のみ） --- */
  --dur: 320ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-header: 60;
  --z-cta: 70;
  --z-drawer: 90;
  --z-modal: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}