/* SITE 88 CABARET EVENT CALENDAR — design tokens
   配色: ブラック #121218 / ボルドー #7B2438 / ピンク #D08A9B / アイボリー #F4EEE5
   書体: Oswald + Noto Sans JP（いずれもシステムフォールバック必須）
   角丸は 0 / 4 / 8 / 12 / 16 のうち 4 / 12 の2値のみを使う
   （カレンダーのセルは 4、カード・パネルは 12。3値目は作らない）

   コントラストは背景 #121218 に対する実測値をコメントに残す。
   ボルドーは「面」専用で、文字色には使わない（暗すぎるため）。 */

:root {
  /* --- color --- */
  --c-bg: #121218;           /* ページ背景 */
  --c-bg-2: #191922;         /* セクション背景（1段明るい） */
  --c-surface: #1E1E28;      /* カード面 */
  --c-surface-2: #262632;    /* 入れ子面・入力欄 */
  --c-ivory: #F4EEE5;        /* 主要文字（対 #121218 約 15.2:1） */
  --c-ivory-2: #DED7CB;      /* 見出し補助（対 #121218 約 12.3:1） */
  --c-muted: #A9A2A0;        /* 補助文字（対 #121218 約 7.5:1） */
  --c-pink: #D08A9B;         /* アクセント1・リンク文字（対 #121218 約 6.9:1） */
  --c-pink-soft: #E7B7C2;    /* 強調・罫線ホバー（対 #121218 約 10.0:1） */
  --c-wine: #7B2438;         /* アクセント2。面のみ（この上の文字は必ず ivory） */
  --c-wine-deep: #5A1727;
  --c-wine-tint: #2B1721;    /* ボルドー系の淡い面（本文は ivory を載せる） */
  --c-line: rgba(244, 238, 229, 0.14);
  --c-line-strong: rgba(244, 238, 229, 0.30);
  --c-ok: #5FBF8C;           /* 営業中（対 #121218 約 8.2:1） */
  --c-warn: #E8B04B;         /* 定休日・注意（対 #121218 約 9.4:1） */
  --c-alert: #F08A8A;        /* 入力エラー（対 #121218 約 7.6:1） */
  --c-on-wine: #F4EEE5;      /* ボルドー面の文字（対 #7B2438 約 8.5:1） */

  /* --- typography ---
     Oswald は英数字・記号のみ。日本語は必ず Noto Sans JP へ落ちるよう
     フォールバックを並べる。本文は Noto Sans JP を先頭にする。 */
  --f-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --f-display: Oswald, "Noto Sans JP", "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.875rem, 1.4rem + 1.9vw, 2.875rem);
  --fs-h2: clamp(1.4375rem, 1.22rem + 0.9vw, 2rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-h4: 1.0625rem;
  --fs-eyebrow: 0.8125rem;  /* 13px 装飾英字ラベルのみ。同内容は通常サイズで併記する */
  --fs-daynum: 1.0625rem;   /* カレンダーの日付（数字・17px） */
  --fs-stat: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);

  --lh-tight: 1.24;
  --lh-heading: 1.42;
  --lh-body: 1.75;
  --lh-dense: 1.5;

  --ls-nav: 0.03em;
  --ls-eyebrow: 0.18em;
  --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(44px, 5.2vw, 80px);

  /* --- layout ---
     PCコンテナは 1120px。ヘッダーの内訳（実測前提の設計値）は
       ブランド 約200px ＋ ナビ8項目 約430px ＋ 主要CTA 約170px
       ＋ 内側gap 16px×2 ＋ 左右padding 28px×2 = 約890px < 1120px
     で、1120px幅でも折り返さない。1279px以下では補助ボタンを1つ落とす。 */
  --container: 1120px;
  --container-narrow: 840px;
  --gutter: clamp(16px, 3.4vw, 28px);
  /* PCヘッダーは MASTER §6 の 64〜80px に収める（実測 72px） */
  --header-h: 72px;
  /* アンカー着地位置。ヘッダー実測高＋余白。1023px以下は responsive.css で 82px へ */
  --anchor-offset: 90px;
  /* 固定CTA。バー全体 = 上罫線1px + padding 3px×2 + タップ領域 48px = 55px（48〜56px） */
  --cta-h: 55px;
  --cta-tap: 48px;
  --cta-pad: 3px;

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

  /* --- shadow（2段階まで） --- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sh-2: 0 14px 36px rgba(0, 0, 0, 0.5);

  /* --- motion（1種類: fade+slide） --- */
  --dur: 200ms;
  --dur-slow: 380ms;
  --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;
  }
}