/* ==========================================================================
   SITE 123 / BAR COCKTAIL MENU — デザイントークン
   配色: ネイビー黒 #131820 / アイボリー #F4EBDD / カッパー #B8734A / ティール #356B68
   書体: IBM Plex Sans（見出し英字・ラベル）＋ Noto Sans JP（本文）
   角丸は 8px に統一（122のCormorant Garamond serif・4px角丸とは異なる質感にする）。
   影は2段階まで。
   ========================================================================== */
:root {
  /* --- 色 --- */
  --c-bg:        #131820;
  --c-bg-raise:  #1a212b;   /* カード */
  --c-bg-sink:   #0d1117;   /* ヘッダー・フッター */
  --c-bg-inset:  #212a36;   /* 表のヘッダ・タブ非選択・フィルターパネル */
  --c-line:      #3d4a58;
  --c-line-soft: #29323d;

  --c-text:      #F4EBDD;   /* 対 #131820 = 高コントラスト */
  --c-text-2:    #C8BBA3;
  --c-text-3:    #A79C89;   /* 注記の下限 */

  --c-copper:    #B8734A;   /* 主アクセント（CTA・価格・見出しラベル） */
  --c-copper-lt: #D89A6E;   /* リンク・フォーカス */
  --c-copper-dk: #8C5636;
  --c-teal:      #356B68;   /* 副アクセント（ノンアル・フィルター強調） */
  --c-teal-lt:   #5FA39D;
  --c-teal-dk:   #1F423F;
  --c-ok:        #7FBFA0;
  --c-warn:      #E8A15C;
  --c-error:     #F0968A;

  --c-on-copper: #1B1108;   /* カッパー地の文字 */
  --c-on-teal:   #F4EBDD;   /* ティール地の文字 */

  /* --- 書体 --- */
  --ff-display: "IBM Plex Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
  --ff-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --fz-body:   1rem;      /* 16px */
  --fz-note:   0.875rem;  /* 14px — 注記の下限 */
  --fz-lead:   1.0625rem; /* 17px */
  --fz-h1:     clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fz-h2:     clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --fz-h3:     clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --lh-body:   1.75;
  --lh-tight:  1.32;

  /* --- 余白・幅 --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px;
  --container: 1160px;
  --gutter: 20px;
  --header-h: 72px;
  --cta-h: 60px;
  --sheet-h: min(82vh, 640px);

  /* --- 形 --- */
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 16px 36px rgba(0, 0, 0, .5);
  --focus: 0 0 0 3px rgba(216, 154, 110, .95);

  --dur: .3s;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; }
}