/* SITE 83 — CABARET CLEAN IVORY / design tokens
   配色（担当仕様）: アイボリー #FBF8F1 / ホワイト #FFFFFF / ブラウン #4A4038 / ローズ #B97983
   角丸は 8px のみ（MASTER §8: 1サイト内で混在させない。担当仕様「カードは小さな角丸に限定」）
   影は2段階まで。明色のため薄く、面の区切りは罫線と背景差で作る。
   本文16px / 注記14px を最小値とする。

   コントラストの扱い（design-guide.md §6 / 4.5:1）
   - 指定色のローズ #B97983 は白地に 3.6:1 のため、本文サイズの文字と
     白抜きボタンの下地には使わない。罫線・装飾・24px以上の数字に限定する。
   - 文字・ボタン下地には #9E4F5E（白地 5.6:1 / 白文字 5.6:1）を使う。
   - 注記色 #6E6157 は最も暗い面 #F1E9DC 上でも 5.0:1 を確保する。 */
:root {
  /* --- 面 --- */
  --c-bg: #FBF8F1;          /* ページ地（アイボリー） */
  --c-bg-2: #F6F1E7;        /* section--alt */
  --c-bg-3: #F1E9DC;        /* 表ヘッダ・キー列・タグ地 */
  --c-surface: #FFFFFF;     /* カード・入力欄・写真枠の内側 */

  /* --- 罫線 --- */
  --c-line: #E4DACB;
  --c-line-strong: #CFC2AE;

  /* --- 文字 ---
     #4A4038 = 10.1:1（白）/ 8.3:1（#F1E9DC）
     #5C5048 = 7.8:1（白）/ 6.4:1（#F1E9DC）
     #6E6157 = 5.9:1（白）/ 5.0:1（#F1E9DC） */
  --c-fg: #4A4038;
  --c-fg-2: #5C5048;
  --c-muted: #6E6157;

  /* --- アクセント（ローズ1色＋状態色） --- */
  --c-accent: #B97983;          /* 罫線・装飾・24px以上の数字にのみ使う */
  --c-accent-strong: #9E4F5E;   /* 文字・ボタン下地（4.5:1 以上を満たす） */
  --c-accent-deep: #843F4D;     /* hover / 押下 */
  --c-accent-on: #FFFFFF;
  --c-accent-soft: #FAF0F1;     /* 淡い面 */
  --c-accent-line: #E8CDD1;

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

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

  /* --- 影（2段階・薄く） --- */
  --shadow-1: 0 1px 2px rgba(74, 64, 56, 0.07);
  --shadow-2: 0 18px 44px rgba(74, 64, 56, 0.16);

  /* --- 寸法 --- */
  --w-page: 1180px;
  --w-text: 720px;
  --h-header: 72px;   /* PC 64〜80px */
  --h-cta: 54px;      /* モバイル固定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: 100px;

  /* --- 文字サイズ（最小14px） --- */
  --fs-note: 14px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-h4: 18px;
  --fs-h3: 21px;
  --fs-h2: clamp(24px, 2.3vw, 30px);
  --fs-h1: clamp(28px, 3.4vw, 38px);
  --fs-display: clamp(34px, 4.6vw, 52px);   /* Cormorant はここだけ大きく使う */

  --lh-tight: 1.32;
  --lh-normal: 1.6;
  --lh-long: 1.78;

  /* --- 書体（担当仕様: Cormorant Garamond + Noto Sans JP） ---
     セリフは大見出し・数値の見せ場のみ。本文・UI は Noto Sans JP。 */
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-display: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN",
    "Yu Mincho", serif;
  --font-num: "Cormorant Garamond", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- モーション（1サイト1種類: fade-up のみ） --- */
  --dur: 360ms;
  --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; }
}