/* ───────────────────────────────────────────────────────────────────────────
   Caviar Maison — design tokens
   Source of truth: design_handoff_caviar_indonesia/README.md §3 + the `M`
   object in pages-maison.jsx. Warm dark luxury — never pure #000, never cool.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --bg:         #0c0a08; /* page background, warm near-black */
  --bg-2:       #15110d; /* surfaces, cards, sticky rail */
  --bg-3:       #1d1813; /* inner image wells / nested surfaces */
  --line:       rgba(201, 162, 99, .18); /* all hairline borders (gold @18%) */
  --line-solid: rgba(201, 162, 99, .35);
  --gold:       #c9a263; /* primary accent, CTAs */
  --gold-light: #e6cf9a; /* italic highlights, "from" prices */
  --ivory:      #efe7d3; /* primary text on dark */
  --mute:       #8a8174; /* secondary text, labels, captions */

  /* Type families */
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (px @ 1440; some fluid via clamp) */
  --display-xl: clamp(48px, 7vw, 104px);
  --display-l:  clamp(40px, 5vw, 72px);
  --display-m:  clamp(36px, 4.4vw, 64px);
  --display-s:  clamp(30px, 3.4vw, 48px);
  --serif-l:    28px;
  --serif-m:    22px;
  --body:       16px;
  --meta:       12px;
  --label:      11px;
  --micro:      10px;
  --tiny:       9px;

  /* Spacing — 8px grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 88px;
  --space-8: 120px;

  /* Layout */
  --gutter: 56px;          /* page horizontal gutter @1440 */
  --content-max: 1440px;   /* content column width (roomier than the 1328 artboard column) */
  --header-offset: 96px;   /* sticky offset below header */
}

@media (max-width: 1180px) { :root { --gutter: 40px; } }
@media (max-width: 720px)  { :root { --gutter: 22px; } }