/* ============================================================
   BASQUE BAR TOYAMA — v4 tokens
   BLUE YARD の編集的レイアウトを、BASQUE の色（ネイビー/ワイン/
   クリーム/金）へ置換した設計トークン。
   ============================================================ */
:root {
  /* --- base / surfaces --- */
  --cream:      #F3ECDD;   /* ページ地（BLUE YARD の白 → 温かいクリーム） */
  --paper:      #FAF5EA;   /* 明るい面 */
  --sand:       #EAE0CC;   /* セクション区切りの淡いサンド */

  /* --- navy family（BLUE YARD の"青の位置"を BASQUE navy で） --- */
  --navy:       #16294A;   /* メイン構造色 */
  --navy-block: #1B3A63;   /* 面ブロック（白抜き見出し用） */
  --navy-deep:  #0C1B33;   /* ローダー/フッターの近黒ネイビー */
  --navy-ink:   #23324C;   /* 濃紺テキスト */

  /* --- accent --- */
  --wine:       #872B3B;   /* CTA・重要ラベル */
  --wine-deep:  #6E1F2D;
  /* v4.1（2026-08-29）ブランド面をネイビーから臙脂へ移した際に追加。
     ローダー・ヒーロースクリム・マーキー・モバイル固定CTA という「印象を決める4面」を
     ネイビーが占めていて、CLAUDE.md の「ネイビーはさし色」という方針から外れていた。
     ただし --wine のベタを全画面に敷くと赤が強すぎるので、暗い側はこの色で受ける。
     金(--gold-soft)の実効コントラスト＝#2A0E18 上で 9.41:1、クリームは 15.2:1。
     （--wine #872B3B のベタだと金が 4.53:1 で AA ギリギリになる） */
  --plum-black: #2A0E18;   /* ほぼ黒の臙脂：ローダー外周・写真スクリムの最深部 */
  --gold:       #C29A55;   /* 金：極細ライン/番号/ラベルのみ */
  --gold-soft:  #D8B878;

  /* --- text --- */
  --ink:        #1C2334;   /* 本文（濃紺寄りの黒） */
  --ink-soft:   #55617A;   /* 補助テキスト */
  /* 旧 #8A93A6 はクリーム地で 2.62:1・サンド地で 2.36:1 しかなく、
     税込表記や「写真はイメージです」など読ませたい注記が読めなかった */
  --ink-faint:  #5B6478;   /* サンド地 4.53:1 / クリーム地 4.9:1 */
  /* 金は線・番号・ラベル用（--gold）。明地で「文字」に使うと 2.0〜2.4:1 しか出ないため、
     文字に使う場合だけこの濃い金を使う */
  --gold-text:  #7D5F2D;   /* サンド地 4.52:1 */
  --on-dark:    #F3ECDD;   /* 暗地の上のテキスト */
  --on-dark-soft:#D8CDB8;  /* 暗地・ワイン地の副テキスト（暖色寄り） */

  /* --- lines --- */
  --line:       rgba(28,35,52,.14);
  --line-strong:rgba(28,35,52,.28);
  --line-cream: rgba(243,236,221,.22);

  /* --- fonts --- */
  --f-display: "Montserrat", "Zen Kaku Gothic New", system-ui, sans-serif; /* BLUE YARD 署名の極太英字 */
  --f-jp:      "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif; /* 和文見出し */
  --f-serif:   "Cormorant Garamond", "Zen Old Mincho", Georgia, serif;       /* 数字/エレガント */
  /* セクション見出しの背後に敷くゴースト文字専用（.head__ghost / .about__ghost）。
     筆記体は大文字にすると崩れるので text-transform をかけないこと。 */
  --f-script:  "Parisienne", "Apple Chancery", "Segoe Script", cursive;
  --f-body:    "Noto Sans JP", system-ui, sans-serif;

  /* --- type scale（BLUE YARD 級の大胆さ） --- */
  --t-hero:  clamp(2.7rem, 1.1rem + 7.4vw, 8.2rem);
  --t-block: clamp(2.3rem, 1rem + 6.1vw, 7rem);
  --t-h2:    clamp(1.9rem, 1.1rem + 3vw, 3.5rem);
  --t-h3:    clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  --t-lead:  clamp(1rem, .94rem + .5vw, 1.24rem);
  --t-base:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --t-small: .82rem;

  /* --- spacing --- */
  --gutter:  clamp(1.25rem, 4vw, 4.5rem);
  /* セクション上下余白は3段。全部同じにすると主役と脇役が同じ重さに見えるので、
     主役（店内メニュー・テイクアウト・About）= --sec、
     中間（コース・アクセス・受け取ったあと）= --sec-mid、
     脇役（カフェ・求人・FAQ）= --sec-sm を使う */
  --sec:     clamp(4.5rem, 4rem + 6vw, 11rem);
  --sec-mid: clamp(3.4rem, 3rem + 4.2vw, 7.6rem);
  --sec-sm:  clamp(2.6rem, 2.3rem + 3vw, 5.4rem);
  --maxw:    1360px;
  --maxw-nar:960px;

  /* --- motion --- */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --d-fast:  .45s;
  --d-slow:  1.1s;

  /* --- misc --- */
  --radius:  2px;   /* BLUE YARD はほぼ直角。角は締める */
  --shadow:  0 24px 60px -28px rgba(12,27,51,.5);
  --nav-h:   clamp(64px, 5.5vw, 88px);
}

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