/* Tokens — palette, themes, shared vars. Load FIRST. */

:root {
  /* ── Palette — Modern Aubergine (default) ─
     Plum + aubergine + bronze on warm cream. Warm-cream background,
     Aubergine carries dark surfaces and CTA fills, Plum holds
     the italic emphasis phrase in display type, Bronze handles
     accents on Aubergine panes. */
  --cream: #F5EFE6;            /* Warm cream — canonical */
  --cream-2: #EDE4D2;          /* Warm cream 2 */
  --cream-3: #E3D8C1;          /* Warm cream 3 */
  --brand: #3C2A3E;             /* Aubergine — primary brand: headings, CTA fills, dark panes (role token, theme-switched) */
  --brand-deep: #251825;        /* Aubergine Deep */
  --brand-soft: #523C54;        /* Aubergine Soft */
  --accent: #5A3D5C;           /* Plum — italic accent */
  --accent-dark: #432D45;      /* Press/active "sink" — Plum stepped darker */
  --accent-light: #6F4D72;     /* Hover "lift toward light" — Plum stepped lighter */
  --champagne: #9C7A55;        /* Bronze — accent on dark panes */
  --champagne-light: #C8A47C;
  --ink: #231923;
  --muted: #6B5F66;
  --faint: #988C90;
  --blush: #C8A47C;            /* bronze-light proxies blush role */
  --sage: #9C7A55;             /* bronze proxies sage role */

  /* Semantic role tokens — themes override these without touching
     individual component rules. CTA = primary call-to-action button.
     Hover state is LIGHTER than the base, not darker — editorial-
     luxury convention is "button lifts toward the light" on hover
     (Stripe, Aesop, Linear, Apple). --accent-dark / --brand-deep are
     reserved for press/active states (button "sinks"). */
  --cta-bg: var(--brand);             /* Aubergine carries the CTA, not Plum */
  --cta-bg-hover: var(--brand-soft);  /* Lifts toward Aubergine Soft */
  --cta-fg: var(--cream);
  --cta-shadow-rgb: 60,42,62;        /* Aubergine RGB for rgba() shadows */
  /* Cream as RGB triples — lets translucent cream surfaces (nav glass,
     hairlines on dark panes, photo placeholders) compose via rgba(var(--…),a)
     so changing the cream ramp propagates everywhere. NO hardcoded cream
     literals in component CSS — route through these. */
  --cream-rgb: 245,239,230;          /* #F5EFE6 */
  --cream-2-rgb: 237,228,210;        /* #EDE4D2 */
  --cream-3-rgb: 227,216,193;        /* #E3D8C1 */

  /* ── Hairlines & rings ─────────────────── */
  --border: rgba(35,25,35,0.10);
  --border-strong: rgba(35,25,35,0.20);
  --ring-hair: 0 0 0 1px rgba(35,25,35,0.06);
  --ring-accent: 0 0 0 1px rgba(90,61,92,0.30);  /* Plum ring on focus/selected */

  /* ── Multi-layer tinted shadows (Editorial Luxury) ── */
  --shadow-card: 0 1px 1px rgba(35,25,35,0.05), 0 4px 12px rgba(35,25,35,0.07), 0 16px 36px rgba(35,25,35,0.11);
  --shadow-card-hover: 0 1px 1px rgba(35,25,35,0.05), 0 8px 20px rgba(35,25,35,0.08), 0 28px 56px rgba(35,25,35,0.10);
  --shadow-pop: 0 12px 28px rgba(35,25,35,0.14), 0 30px 80px rgba(20,12,20,0.14);
  --shadow-bubble: 0 8px 24px rgba(35,25,35,0.18), 0 24px 48px rgba(35,25,35,0.10);

  /* Inset highlight for Double-Bezel inner cores — simulates edge refraction */
  --inset-highlight: inset 0 1px 0 rgba(255,255,255,0.5);
  --inset-highlight-dark: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ── Type ──────────────────────────────── */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;

  /* ── Easing (premium springs / cubic-bezier) ── */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* Soft ease-in-out for chrome transitions (button hover, header CTA
     reveal, phone icon↔pill morph). Material Standard curve — gentle
     acceleration and deceleration both ends. Used where snappy --ease
     reads as too abrupt against the editorial-luxury feel. */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Texture ───────────────────────────── */
  /* The OPAQUE, warm original paper scan, tiled behind the page canvas
     (.app-main / .view). It intentionally does NOT recolor with the theme —
     keeps its warm wedding-invitation feel everywhere (no blend mode). Derived
     from src/backgrounds/tex15_sheet.jpg (raw source kept local, gitignored) via
     scripts/make-paper-tile.py (downscaled 3600->1600 + seamless, no recolor).
     background-color: var(--cream) is a pre-load fallback
     only — the opaque tile covers it. */
  --paper-tile: url("../backgrounds/paper-tile.webp");

  /* ── Layout ────────────────────────────── */
  --nav-h: 72px;
  --mockup-h: 32px;
  --max-w: 1440px;
}

/* ── Theme: Warm Archive ───────────────────────────────
   Espresso + terracotta + cream. Switchable comparator
   theme; not used in production. */
:root[data-theme="warm-archive"] {
  --cream: #F5EFE6;
  --cream-2: #EDE4D2;
  --cream-3: #E3D8C1;
  --brand: #3A2818;             /* Espresso */
  --brand-deep: #23180F;
  --brand-soft: #4E3828;
  --accent: #B85A3B;           /* Terracotta clay — the resemblance vector */
  --accent-dark: #964730;
  --accent-light: #CB7152;
  --champagne: #C9B08A;
  --champagne-light: #E0CFAF;
  --ink: #2A1F18;
  --muted: #6B5D52;
  --faint: #928574;
  --blush: #E8C7C8;
  --sage: #A8B5A2;

  --cta-bg: var(--accent);
  --cta-bg-hover: var(--accent-light);
  --cta-fg: var(--cream);
  --cta-shadow-rgb: 184,90,59;

  --border: rgba(58,40,24,0.10);
  --border-strong: rgba(58,40,24,0.20);
  --ring-hair: 0 0 0 1px rgba(58,40,24,0.06);
  --ring-accent: 0 0 0 1px rgba(184,90,59,0.30);

  --shadow-card: 0 1px 1px rgba(58,40,24,0.05), 0 4px 12px rgba(58,40,24,0.07), 0 16px 36px rgba(58,40,24,0.11);
  --shadow-card-hover: 0 1px 1px rgba(58,40,24,0.05), 0 8px 20px rgba(58,40,24,0.08), 0 28px 56px rgba(58,40,24,0.10);
  --shadow-pop: 0 12px 28px rgba(58,40,24,0.14), 0 30px 80px rgba(35,24,15,0.14);
  --shadow-bubble: 0 8px 24px rgba(58,40,24,0.18), 0 24px 48px rgba(58,40,24,0.10);
}

/* ── Theme: Soft Romance ───────────────────
   Lighter, airier palette for spring/summer weddings. Soft ivory
   backgrounds, dusty navy headings, warm gold + light blush accents,
   pale sage for natural touches, deep charcoal text. */
:root[data-theme="soft-romance"] {
  --cream: #FAF7F2;
  --cream-2: #F4EFE5;
  --cream-3: #E8DDC8;
  --brand: #2C4A6E;
  --brand-deep: #1F3656;
  --brand-soft: #4A6485;
  --accent: #E0C18F;
  --accent-dark: #C7A876;
  --accent-light: #EED8B4;
  --champagne: #E0C18F;
  --champagne-light: #EED8B4;
  --ink: #222222;
  --muted: #6E6E6E;
  --faint: #C5D4C2;
  --blush: #F2D9D9;
  --sage: #C5D4C2;

  --cta-bg: var(--brand);
  --cta-bg-hover: var(--brand-soft);
  --cta-fg: var(--cream);
  --cta-shadow-rgb: 44,74,110;

  --border: rgba(44,74,110,0.10);
  --border-strong: rgba(44,74,110,0.20);
  --ring-hair: 0 0 0 1px rgba(44,74,110,0.06);
  --ring-accent: 0 0 0 1px rgba(224,193,143,0.40);
}

/* ── Theme: 2026 Luxe Wedding ─────────────
   Cool/luxe palette: deep navy + soft gold + blush + sage. */
:root[data-theme="luxe"] {
  --cream: #F8F4ED;
  --cream-2: #F0EBE0;
  --cream-3: #E3D8C1;
  --brand: #1E2A44;
  --brand-deep: #14203A;
  --brand-soft: #34405E;
  --accent: #D4AF7B;
  --accent-dark: #B89968;
  --accent-light: #E5CFA8;
  --champagne: #D4AF7B;
  --champagne-light: #E5CFA8;
  --ink: #2A2A2A;
  --muted: #6B6B6B;
  --faint: #A8B5A2;
  --blush: #E8C7C8;
  --sage: #A8B5A2;

  /* CTAs in luxe are navy, not gold — gold stays for decorative accents. */
  --cta-bg: var(--brand);
  --cta-bg-hover: var(--brand-soft);
  --cta-fg: var(--cream);
  --cta-shadow-rgb: 30,42,68;

  --border: rgba(30,42,68,0.10);
  --border-strong: rgba(30,42,68,0.20);
  --ring-hair: 0 0 0 1px rgba(30,42,68,0.06);
  --ring-accent: 0 0 0 1px rgba(212,175,123,0.35);
}

/* ════════════════════════════════════════════════════════════════ */
/*  PALETTE COMPARATORS — switchable themes for client review.       */
/*  Live in the mockup-bar theme switcher. Each is a complete        */
/*  twelve-token system applied to a real UI snippet so the team     */
/*  can compare in-context rather than from hex values alone.        */
/*  Spec source: src/design-system.html #color-exploration           */
/* ════════════════════════════════════════════════════════════════ */

/* ── Theme: Garden Romantic ───────────────
   Sage + oat + tobacco-gold + cedar. Clay-free; warmth comes from
   tobacco champagne. Greens lead 2026 wedding forecasts. */
:root[data-theme="garden-romantic"] {
  --cream: #F4EFE5;            /* Oat */
  --cream-2: #EAE3D1;          /* Oat 2 */
  --cream-3: #DBD0B6;          /* Oat 3 */
  --brand: #3A4536;             /* Cedar — headings + CTA */
  --brand-deep: #222A20;        /* Cedar Deep */
  --brand-soft: #52604B;        /* Cedar Soft */
  --accent: #5F7058;           /* Sage — italic accent (replaces terracotta role) */
  --accent-dark: #4C5B47;      /* inferred — sage stepped ~15% darker */
  --accent-light: #7A8C72;     /* inferred — sage stepped ~15% lighter, hover lift */
  --champagne: #C7A878;        /* Tobacco */
  --champagne-light: #E3CDA8;  /* Tobacco Lt */
  --ink: #2A2E26;
  --muted: #6F6657;
  --faint: #9A9182;
  --blush: #E3CDA8;            /* inferred — tobacco-light stands in for blush */
  --sage: #5F7058;             /* Sage */

  --cta-bg: var(--brand);
  --cta-bg-hover: var(--brand-soft);
  --cta-fg: var(--cream);
  --cta-shadow-rgb: 58,69,54;  /* Cedar RGB */

  --border: rgba(42,46,38,0.10);            /* Ink @ 10% */
  --border-strong: rgba(42,46,38,0.20);     /* Ink @ 20% */
  --ring-hair: 0 0 0 1px rgba(42,46,38,0.06);
  --ring-accent: 0 0 0 1px rgba(95,112,88,0.30);  /* Sage ring */
}

/* ── Theme: Coastal PNW Heritage ──────────
   Slate + fog + driftwood + pacific blue. BC geography palette;
   highest AAA-pair count of the lot. */
:root[data-theme="coastal-pnw"] {
  --cream: #F2EEE8;            /* Mist */
  --cream-2: #E6DFD2;          /* Mist 2 */
  --cream-3: #D4CBB9;          /* Mist 3 */
  --brand: #2C3E50;             /* Slate — CTA + headings */
  --brand-deep: #1A2734;        /* Slate Deep */
  --brand-soft: #4A5C6E;        /* Slate Soft */
  --accent: #3F5F70;           /* Pacific — italic accent */
  --accent-dark: #2F4956;      /* inferred — pacific stepped ~15% darker */
  --accent-light: #527589;     /* inferred — pacific stepped ~15% lighter */
  --champagne: #B89F7D;        /* Driftwood */
  --champagne-light: #D6BFA0;  /* Driftwood Lt */
  --ink: #1F2A33;
  --muted: #6B7480;
  --faint: #9AA3AE;
  --blush: #D6BFA0;            /* inferred — driftwood-light proxies blush */
  --sage: #B89F7D;             /* inferred — drift-wood proxies sage role */

  --cta-bg: var(--brand);
  --cta-bg-hover: var(--brand-soft);
  --cta-fg: var(--cream);
  --cta-shadow-rgb: 44,62,80;  /* Slate RGB */

  --border: rgba(31,42,51,0.10);
  --border-strong: rgba(31,42,51,0.20);
  --ring-hair: 0 0 0 1px rgba(31,42,51,0.06);
  --ring-accent: 0 0 0 1px rgba(63,95,112,0.30);  /* Pacific ring */
}

/* ── Theme: Black-Tie Emerald ─────────────
   Emerald + champagne + charcoal + ivory. Aman/Rosewood/Harrods
   playbook; every pairing AAA. */
:root[data-theme="black-tie-emerald"] {
  --cream: #F6F2EA;            /* Ivory */
  --cream-2: #EDE7DA;          /* Ivory 2 */
  --cream-3: #DDD3BE;          /* Ivory 3 */
  --brand: #0D4C3C;             /* Emerald — CTA + headings (Harrods exact) */
  --brand-deep: #072F25;        /* Emerald Deep */
  --brand-soft: #16604E;        /* Emerald Soft */
  --accent: #16604E;           /* inferred — emerald-soft as italic accent */
  --accent-dark: #0D4C3C;      /* inferred — emerald base on press */
  --accent-light: #1F7860;     /* inferred — emerald-soft lifted ~15% */
  --champagne: #C9A75A;
  --champagne-light: #E0C284;
  --ink: #1E1E1E;              /* near-black, paired w/ Charcoal #36454F for chrome */
  --muted: #5C5C5C;
  --faint: #8A8A8A;
  --blush: #E0C284;            /* inferred — champagne-light proxies blush */
  --sage: #C9A75A;             /* inferred — champagne proxies sage role */

  --cta-bg: var(--brand);
  --cta-bg-hover: var(--brand-soft);
  --cta-fg: var(--cream);
  --cta-shadow-rgb: 13,76,60;  /* Emerald RGB */

  --border: rgba(30,30,30,0.10);
  --border-strong: rgba(30,30,30,0.20);
  --ring-hair: 0 0 0 1px rgba(30,30,30,0.06);
  --ring-accent: 0 0 0 1px rgba(201,167,90,0.35);  /* Champagne ring */
}

/* ── Theme: Botanical Forest ──────────────
   Forest green + cool ochre. Clay-holdout: keeps a warm accent but
   shifts it from terracotta to burnt-umber / botanical-plate territory. */
:root[data-theme="botanical-forest"] {
  --cream: #F2EDE0;            /* Parchment */
  --cream-2: #E6DEC8;          /* Parchment 2 */
  --cream-3: #D6C9A8;          /* Parchment 3 */
  --brand: #1F3A2A;             /* Forest — CTA + headings */
  --brand-deep: #122518;        /* Forest Deep */
  --brand-soft: #3A5A48;        /* Forest Soft */
  --accent: #A8632F;           /* Ochre — italic accent (decorative only) */
  --accent-dark: #874E25;      /* inferred — ochre stepped ~15% darker */
  --accent-light: #C07A45;     /* inferred — ochre lifted ~15% */
  --champagne: #C9A560;        /* Saffron */
  --champagne-light: #E0C28E;  /* Saffron Lt */
  --ink: #1F2A20;
  --muted: #6B6354;
  --faint: #94897A;
  --blush: #E0C28E;            /* inferred — saffron-light proxies blush */
  --sage: #3A5A48;             /* inferred — forest-soft proxies sage role */

  --cta-bg: var(--brand);
  --cta-bg-hover: var(--brand-soft);
  --cta-fg: var(--cream);
  --cta-shadow-rgb: 31,58,42;  /* Forest RGB */

  --border: rgba(31,42,32,0.10);
  --border-strong: rgba(31,42,32,0.20);
  --ring-hair: 0 0 0 1px rgba(31,42,32,0.06);
  --ring-accent: 0 0 0 1px rgba(168,99,47,0.30);  /* Ochre ring */
}