/* SITE 95 CABARET MOBILE SCHEDULE — design tokens
   配色: ネイビー #121A2B / ホワイト #F8F8F6 / ピンク #D45F7C / グレー #818895
   書体: Inter + Noto Sans JP（いずれもシステムフォールバック必須）
   角丸は 0 / 4 / 8 / 12 / 16 のうち 12（面）と 8（小さなタグ・チップ）の2値だけを使う。
   このテンプレートは 390px を設計の基準にし、PCでは中央コンテナを広げるだけにする。 */

:root {
  /* --- color（暗色。文字は必ず 4.5:1 以上を確保する） --- */
  --c-bg: #121A2B;           /* ページ背景（ネイビー） */
  --c-bg-2: #182234;         /* セクション背景（1段浮かせる） */
  --c-surface: #1C2739;      /* カード面 */
  --c-surface-2: #22304A;    /* 入力欄・入れ子面 */
  --c-ink: #F8F8F6;          /* 主要文字（対 #121A2B 約 16.6:1） */
  --c-ink-2: #DDE1E8;        /* 本文（対 #121A2B 約 13.4:1） */
  --c-muted: #9AA3B2;        /* 補助文字（対 #182234 約 6.3:1／対 #22304A 約 5.2:1） */
  --c-grey: #818895;         /* 罫線・ドット等の装飾グレー */
  --c-accent: #D45F7C;       /* アクセント（面・罫線・主要ボタン背景） */
  --c-accent-text: #EE87A0;  /* アクセント色の文字（対 #22304A 約 5.4:1） */
  --c-accent-tint: #2A2233;  /* アクセント寄りの面（文字は ink 系を載せる） */
  --c-on-accent: #121A2B;    /* アクセント面の文字（対 #D45F7C 約 4.7:1） */
  --c-line: #2C3A52;         /* 罫線（暗色面の区切り） */
  --c-line-strong: #44536E;
  --c-ok: #4FCF9A;           /* 営業中・出勤中（対 #182234 約 8.2:1） */
  --c-alert: #FF8A8A;        /* エラー・休業（対 #1C2739 約 6.7:1） */

  /* --- typography --- */
  --f-sans: Inter, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --fs-body: 1rem;         /* 16px */
  --fs-body-lg: 1.0625rem; /* 17px 長文 */
  --fs-note: 0.875rem;     /* 14px 注記の下限 */
  --fs-label: 0.9375rem;   /* 15px */
  --fs-h1: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
  --fs-h2: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-h4: 1.0625rem;
  --fs-eyebrow: 0.8125rem;  /* 13px 装飾英字ラベルのみ。同内容は必ず通常サイズで併記する */
  --fs-stat: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem);

  --lh-tight: 1.3;
  --lh-heading: 1.45;
  --lh-body: 1.75;
  --lh-dense: 1.5;

  --ls-nav: 0.02em;
  --ls-eyebrow: 0.16em;
  --ls-body: 0.01em;

  /* --- spacing --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --section-y: clamp(40px, 4.6vw, 72px);

  /* --- layout --- */
  --container: 1120px;
  --container-narrow: 780px;
  --gutter: clamp(16px, 3.2vw, 26px);
  /* PCヘッダーは MASTER §6 の 64〜80px に収める（実測 68px） */
  --header-h: 68px;
  /* アンカー着地位置。ヘッダー実測高＋余白。1023px以下は responsive.css で調整 */
  --anchor-offset: 88px;
  /* 固定CTA。バー全体 = 上罫線1px + padding 3px×2 + タップ領域 48px = 55px（48〜56px） */
  --cta-h: 55px;
  --cta-tap: 48px;
  --cta-pad: 3px;

  /* --- radius（12 / 8 の2値のみ） --- */
  --r-m: 12px;
  --r-s: 8px;

  /* --- shadow（2段階まで） --- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-2: 0 12px 34px rgba(0, 0, 0, 0.5);

  /* --- motion（1種類: fade+slide） --- */
  --dur: 180ms;
  --dur-slow: 340ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

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

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