/* SITE 92 — CABARET LOCAL SEO / design tokens
   配色（担当仕様）: ホワイト #FFFFFF / チャコール #2A2D33 / ブルー #536F9E / ローズ #B36A7B
   書体（担当仕様）: Noto Sans JP のみ。装飾書体を持たず、太さと字間だけで階層を作る。
   角丸は 4px のみ（MASTER §8: 1サイト内で混在させない。地域情報の表・カードが主役のため小さく取る）
   影は2段階。面の区切りは罫線と淡い背景で作り、カードを一律に浮かせない。
   本文16px / 注記14px を最小値とする。

   コントラストの扱い（design-guide.md / 4.5:1）
   - ブルー #536F9E は白地 5.08:1。本文リンク・ボタン下地の双方に使える。
   - ローズ #B36A7B は白地 3.99:1 のため、罫線・区切り・24px以上の数字にのみ使う。
     文字として使う場合は #9C4E63（白地 5.70:1）へ置き換える。
   - 注記色 #5A5F69 は最も暗い面 #EAEEF5 上でも 5.6:1 を確保する。 */
:root {
  /* --- 面 --- */
  --c-bg: #FFFFFF;          /* ページ地 */
  --c-bg-2: #F3F6FA;        /* section--alt */
  --c-bg-3: #EAEEF5;        /* 表ヘッダ・キー列・タグ地 */
  --c-surface: #FFFFFF;     /* カード・入力欄・写真枠の内側 */

  /* --- 罫線 --- */
  --c-line: #DFE3EA;
  --c-line-strong: #C3CAD6;

  /* --- 文字 ---
     #2A2D33 = 13.6:1（白）/ 11.8:1（#EAEEF5）
     #444952 = 9.0:1（白）/ 7.9:1（#EAEEF5）
     #5A5F69 = 6.4:1（白）/ 5.6:1（#EAEEF5） */
  --c-fg: #2A2D33;
  --c-fg-2: #444952;
  --c-muted: #5A5F69;

  /* --- アクセント1: ブルー（主要導線・現在地・リンク） --- */
  --c-accent: #536F9E;
  --c-accent-strong: #536F9E;   /* 文字・ボタン下地（白地 5.08:1） */
  --c-accent-deep: #3F5880;     /* hover / 押下（白地 7.2:1） */
  --c-accent-on: #FFFFFF;
  --c-accent-soft: #EFF3FA;     /* 淡い面 */
  --c-accent-line: #C9D5E8;

  /* --- アクセント2: ローズ（区切り・見出しの細い罫・大きな数字） --- */
  --c-rose: #B36A7B;            /* 罫線・装飾・24px以上の数字にのみ使う */
  --c-rose-text: #9C4E63;       /* 文字に使う場合はこちら（白地 5.70:1） */
  --c-rose-soft: #FBF2F4;
  --c-rose-line: #E7CDD4;

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

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

  /* --- 影（2段階・薄く） --- */
  --shadow-1: 0 1px 2px rgba(42, 45, 51, 0.08);
  --shadow-2: 0 16px 40px rgba(42, 45, 51, 0.18);

  /* --- 寸法 --- */
  --w-page: 1160px;
  --w-text: 720px;
  --h-header: 68px;   /* 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(23px, 2.2vw, 29px);
  --fs-h1: clamp(27px, 3.2vw, 36px);
  --fs-display: clamp(30px, 3.8vw, 44px);

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

  /* --- 書体（担当仕様: Noto Sans JP 単独） ---
     見出し・本文・数値をすべて同じ書体で通し、太さ・字間・サイズで区別する。
     --font-num は等幅数字を効かせるための別名で、実体は同じファミリー。 */
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-display: var(--font-base);
  --font-num: var(--font-base);

  /* --- モーション（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; }
}