/* ==========================================================================
   SITE 124 / BAR & DINING — デザイントークン
   配色: アイボリー #FAF7F0 / チャコール #2E302E / オリーブ #66735C / ワイン #7A3540
   書体: DM Sans（見出し英字・数字）＋ Noto Sans JP（本文）
   角丸は 8px に統一。影は2段階まで。

   コントラスト検証（design-guide.md / MASTER §10: 本文4.5:1以上）
   - オリーブ #66735C は地 #FAF7F0 に対し約4.7:1。装飾・大きめ文字は生の値、
     本文サイズのリンク・強調文字には #4E5847（約7.0:1）を使う。
   - ワイン #7A3540 は地 #FAF7F0 に対し約8.1:1、白文字ボタンの下地にも安全。
   - 注記色 #5E5F54 は最も暗い面（--c-bg-inset）でも約5.1:1を確保する。 */
:root {
  /* --- 面 --- */
  --c-bg:        #FAF7F0;  /* ページ地（アイボリー） */
  --c-bg-raise:  #FFFFFF;  /* カード・入力欄 */
  --c-bg-sink:   #F1EBDD;  /* ヘッダー・フッター・ドロワー */
  --c-bg-inset:  #EAE3D3;  /* 表ヘッダ・タブ非選択・キー列 */
  --c-line:      #E2DAC8;
  --c-line-soft: #EAE4D6;
  --c-line-strong: #CDC2A9;

  /* --- 文字 --- */
  --c-text:      #2E302E;  /* 本文（チャコール） 地に対し14:1以上 */
  --c-text-2:    #454741;  /* 本文の副次色。白/地とも7:1以上 */
  --c-text-3:    #5E5F54;  /* 注記の下限。最暗面でも5:1以上 */

  /* --- アクセント --- */
  --c-olive:      #66735C; /* 装飾・チップ・大きい数字用（地に対し約4.7:1） */
  --c-olive-deep: #4E5847; /* 本文サイズのリンク・強調（地に対し約7.0:1） */
  --c-olive-soft: #EEF0E7; /* 淡い面 */
  --c-wine:       #7A3540; /* 主要CTA・価格（地に対し約8.1:1） */
  --c-wine-deep:  #5E2732; /* hover・押下 */
  --c-wine-soft:  #F6E9EA; /* 淡い面（エラーではない強調） */
  --c-on-wine:    #FFFFFF; /* ワイン地の文字 */

  --c-ok:    #2F6B4F;  /* 営業中・ノンアルコール表示 */
  --c-warn:  #8A5A12;  /* まもなく開店・アレルゲン表示 */
  --c-error: #B3261E;  /* フォームエラー */
  --c-focus: 0 0 0 3px rgba(122, 53, 64, .38), 0 0 0 5px rgba(122, 53, 64, .18);

  /* --- 書体 --- */
  --ff-display: "DM Sans", "Segoe UI", "Hiragino Kaku Gothic ProN", 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.34;

  /* --- 余白・幅 --- */
  --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: 1200px;
  --gutter: 20px;
  --header-h: 76px;
  --cta-h: 60px;

  /* --- 形 --- */
  --radius: 8px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(46, 48, 46, .08);
  --shadow-2: 0 18px 44px rgba(46, 48, 46, .14);

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

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