/* ============================================================
   DESIGN TOKENS — Butter is Better
   Bordeaux palette · Pinyon Script / Playfair Display / Inter
   ============================================================ */

:root {
  /* ── Background ── */
  --bg:          #4a1218;
  --bg-soft:     #5a1a20;
  --bg-deep:     #3a0e13;
  --bg-darker:   #2a0a0e;

  /* ── Text ── */
  --text:        #f5ede0;
  --text-soft:   rgba(245, 237, 224, 0.78);
  --text-mute:   rgba(245, 237, 224, 0.55);

  /* ── Gold accents ── */
  --gold:        #d4b27a;
  --gold-soft:   #e6c894;
  --gold-deep:   #a8864e;

  /* ── Cream ── */
  --cream:       #f5ede0;
  --cream-warm:  #ede2d0;

  /* ── Surfaces / Borders ── */
  --surface:     rgba(245, 237, 224, 0.04);
  --surface-2:   rgba(245, 237, 224, 0.07);
  --border:      rgba(212, 178, 122, 0.18);
  --border-strong: rgba(212, 178, 122, 0.35);

  /* ── Shadows ── */
  --shadow:      0 30px 80px rgba(0, 0, 0, 0.4);
  --shadow-deep: 0 50px 120px rgba(0, 0, 0, 0.6);

  /* ── Typography ── */
  --font-script:  'Pinyon Script', cursive;
  --font-display: 'Playfair Display', serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-sans:    'Inter', system-ui, sans-serif;

  /* ── Layout ── */
  --maxw:        1500px;
  --header-h:    80px;

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;

  /* ── Easing ── */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
}