/* ============================================================
 * tokens.css — デザイントークン
 *
 * 方針（2026-10 リニューアル）
 *  - クラファン用メイン画像の雰囲気に合わせた（画像そのものはサイトに載せない）、
 *    クリーム × ボルドー × ローズ × 金の「紅葉とバラのハロウィン」。
 *  - 昼のセクションは明るいクリーム、夜の部・フッターは深いボルドー。
 *  - 部品は下の「役割の変数（--bg / --surface / --text …）」だけを参照する。
 *    夜のセクションでは .theme-night がこれらを差し替えるので、同じ部品が夜色になる。
 *
 * 本文コントラスト（4.5:1 以上）
 *    ink      #3B1C22 on cream #FDF5EC → 14.1:1
 *    muted    #6B4540 on cream          →  7.6:1
 *    bordeaux #7B1730 on cream          →  9.7:1
 *    gold-ink #8A5A1F on cream          →  5.5:1（小さな英字ラベル用）
 *    夜 text  #FBEFE0 on #2A0C14        → 16.0:1 / muted #E3C9B6 → 11.5:1 / gold #E8C57D → 11.0:1
 * ============================================================ */

:root {
  /* ---- パレット ---- */
  --c-cream: #fdf5ec;
  --c-cream-2: #f7e8d7;
  --c-paper: #fffcf7;
  --c-bordeaux: #7b1730;
  --c-bordeaux-deep: #561022;
  --c-wine: #2a0c14;
  --c-wine-2: #3d1520;
  --c-rose: #f2c6c4;
  --c-rose-soft: #f9e0dc;
  --c-rose-deep: #c4566a;
  --c-gold: #b8893e;
  --c-gold-ink: #8a5a1f;
  --c-gold-light: #e8c57d;
  --c-leaf: #cf4a26;
  --c-ink: #3b1c22;
  --c-ink-muted: #6b4540;
  --c-ivory: #fbefe0;
  --c-ivory-muted: #e3c9b6;

  /* ---- 役割の変数（昼＝既定） ---- */
  --bg: var(--c-cream);
  --bg-alt: var(--c-cream-2);
  --surface: var(--c-paper);
  --surface-soft: var(--c-rose-soft);
  --line: rgba(184, 137, 62, 0.35);
  --line-soft: rgba(123, 23, 48, 0.12);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-muted);
  --heading: var(--c-bordeaux);
  --accent: var(--c-bordeaux);
  --accent-ink: var(--c-gold-ink);
  --on-accent: var(--c-cream);
  --ornament: var(--c-gold);
  --shadow-card: 0 10px 30px rgba(86, 16, 34, 0.08), 0 2px 6px rgba(86, 16, 34, 0.05);

  /* ---- 旧名との互換（shop-detail など既存の参照用） ---- */
  --c-black: var(--bg);
  --c-text: var(--text);
  --c-text-muted: var(--text-muted);
  --c-line: var(--line);
  --c-night-accent: var(--accent);
  --c-night-accent-soft: var(--accent);
  --c-charcoal-2: var(--surface);

  /* ---- フォント ---- */
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-display: "Playfair Display", "Times New Roman", serif; /* 英字のみ */
  --font-script: "Great Vibes", "Snell Roundhand", "Segoe Script", cursive;
  --font-numeral: "Cormorant Garamond", "Times New Roman", serif; /* トップの日付・時間 */

  /* ---- タイポスケール（clamp でスマホ〜PC） ---- */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --lh-body: 1.9;
  --lh-tight: 1.25;

  /* ---- 余白 ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(4.5rem, 8vw, 7.5rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --container: 68rem;

  /* ---- 形状 ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;

  /* ---- モーション ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 400ms;
  --dur-slow: 900ms;

  /* ---- ヘッダー高さ（アンカーのオフセットに使用） ---- */
  --header-h: 6rem;
}

@media (min-width: 48em) {
  :root {
    --header-h: 4.5rem;
  }
}

/* 夜のセクション：役割の変数だけを差し替える */
.theme-night,
.part--night,
.site-footer {
  --bg: var(--c-wine);
  --bg-alt: var(--c-wine-2);
  --surface: var(--c-wine-2);
  --surface-soft: rgba(232, 197, 125, 0.1);
  --line: rgba(232, 197, 125, 0.3);
  --line-soft: rgba(251, 239, 224, 0.12);
  --text: var(--c-ivory);
  --text-muted: var(--c-ivory-muted);
  --heading: var(--c-ivory);
  --accent: var(--c-gold-light);
  --accent-ink: var(--c-gold-light);
  --on-accent: var(--c-wine);
  --ornament: var(--c-gold-light);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* 参照ビジュアルの紙・夕暮れ・薔薇の色。背景用の色と文字用の色を分離。 */
:root {
  --c-cream: #fff0da;
  --c-cream-2: #f5dcc1;
  --c-paper: #fff8e9;
  --c-bordeaux: #790d25;
  --c-bordeaux-deep: #500f20;
  --c-rose-soft: #f5d1c4;
  --c-ink-muted: #613b36; /* ピーチ背景でも本文の補足色を 4.5:1 以上に */
  --paper-edge: #edc497;
  --peach: #eeb28e;
  --rose-haze: #d99489;
  --warm-glow: #ffd588;
  --light-core: #fff8d8;
  --night-bg: #2a0c14;
  --night-surface: #451525;
  --night-gold: #f4d499;
  --night-purple: #672e68;
  --ribbon-text: #660e24;
  --photo-frame: #fff8ee;
  --photo-tone: rgba(236, 141, 51, .055);
  --shadow-card: 0 16px 34px rgba(89, 35, 24, .16), 0 3px 8px rgba(89, 35, 24, .08);
}