/* ============================================================================
   NOCTURNE — DESIGN TOKENS
   The single source of truth. Two themes (Nocturne / Aurora) derive from one
   warm, architectural palette extracted directly from the photography.
   ========================================================================== */

:root {
  /* — Brand palette (raw) ————————————————————————————————————————————— */
  --ink-900: #0C0907;   /* espresso black — deepest ground            */
  --ink-800: #120D09;
  --ink-700: #1A140E;   /* raisin charcoal                            */
  --ink-600: #241B12;   /* cocoa                                      */
  --ink-500: #322519;

  --sand-100: #F4ECDD;  /* ivory linen                                */
  --sand-200: #EBE0CD;
  --sand-300: #DCCDB2;
  --sand-400: #C7B299;  /* travertine                                 */
  --sand-500: #AD9876;
  --sand-600: #8C775A;

  --gold-100: #F0DCA8;
  --gold-200: #E2C684;
  --gold-300: #D4AF63;  /* primary brass — the logo gold              */
  --gold-400: #C29A45;
  --gold-500: #A07C34;
  --gold-600: #7C5E26;

  --olive-300: #8A8A66;
  --olive-400: #6E7350;
  --olive-500: #555A3C;

  --wine-500: #5A2A2A;  /* oxblood — used with extreme restraint      */

  /* — Type families ————————————————————————————————————————————————— */
  --font-display: "Cormorant Garamond", "Amiri", Georgia, "Times New Roman", serif;
  --font-serif:   "Cormorant Garamond", "Amiri", Georgia, serif;
  --font-label:   "Marcellus", "El Messiri", "Cormorant Garamond", serif;
  --font-body:    "Jost", "El Messiri", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Fluid type scale (clamp: min, preferred, max) ————————————————— */
  --fs-eyebrow: clamp(0.66rem, 0.6rem + 0.3vw, 0.78rem);
  --fs-body-sm: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --fs-body:    clamp(0.95rem, 0.9rem + 0.3vw, 1.06rem);
  --fs-lead:    clamp(1.1rem, 1rem + 0.7vw, 1.45rem);
  --fs-h6:      clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
  --fs-h5:      clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  --fs-h4:      clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  --fs-h3:      clamp(2rem, 1.3rem + 3.4vw, 3.6rem);
  --fs-h2:      clamp(2.6rem, 1.4rem + 5.4vw, 5rem);
  --fs-h1:      clamp(3.2rem, 1rem + 9vw, 8.5rem);
  --fs-mega:    clamp(4rem, -1rem + 18vw, 16rem);

  /* — Spacing scale (8pt-ish, fluid where it matters) ——————————————— */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 4vw, 5rem);
  --maxw: 1680px;
  --maxw-text: 46rem;

  /* — Radii ————————————————————————————————————————————————————————— */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* — Motion ———————————————————————————————————————————————————————— */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.25s;
  --t-base: 0.45s;
  --t-slow: 0.8s;
  --t-cinematic: 1.2s;

  /* — Layering ——————————————————————————————————————————————————————— */
  --z-base: 1;
  --z-reveal: 5;
  --z-nav: 100;
  --z-overlay: 200;
  --z-palette: 300;
  --z-cursor: 9999;
  --z-preloader: 10000;

  /* — Hairlines ——————————————————————————————————————————————————————— */
  --hair: 1px;
}

/* ——————————————————————————————————————————————————————————————————————
   THEME · NOCTURNE (night — default)
   ————————————————————————————————————————————————————————————————————— */
:root,
[data-theme="nocturne"] {
  color-scheme: dark;

  --bg: var(--ink-900);
  --bg-elevated: var(--ink-700);
  --bg-sunken: #080604;
  --surface: rgba(244, 236, 221, 0.03);
  --surface-strong: rgba(244, 236, 221, 0.06);

  --text: var(--sand-100);
  --text-soft: rgba(244, 236, 221, 0.72);
  --text-muted: rgba(244, 236, 221, 0.48);
  --text-faint: rgba(244, 236, 221, 0.26);

  --accent: var(--gold-300);
  --accent-bright: var(--gold-200);
  --accent-deep: var(--gold-500);
  --accent-contrast: var(--ink-900);

  --line: rgba(244, 236, 221, 0.12);
  --line-strong: rgba(244, 236, 221, 0.22);
  --line-gold: rgba(212, 175, 99, 0.4);

  --shadow-soft: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 40px 90px -50px rgba(0, 0, 0, 0.95);

  --scrim: linear-gradient(180deg, rgba(12,9,7,0) 0%, rgba(12,9,7,0.55) 60%, rgba(12,9,7,0.92) 100%);
  --scrim-soft: linear-gradient(180deg, rgba(12,9,7,0.1) 0%, rgba(12,9,7,0.65) 100%);
  --vignette: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(12,9,7,0.5) 100%);

  --grain-opacity: 0.05;
}

/* ——————————————————————————————————————————————————————————————————————
   THEME · AURORA (day — the specialty café identity)
   ————————————————————————————————————————————————————————————————————— */
[data-theme="aurora"] {
  color-scheme: light;

  --bg: #F3ECDD;
  --bg-elevated: #FBF6EC;
  --bg-sunken: #E7DCC7;
  --surface: rgba(36, 27, 18, 0.035);
  --surface-strong: rgba(36, 27, 18, 0.07);

  --text: #251B11;
  --text-soft: rgba(37, 27, 17, 0.78);
  --text-muted: rgba(37, 27, 17, 0.55);
  --text-faint: rgba(37, 27, 17, 0.3);

  --accent: var(--gold-500);
  --accent-bright: var(--gold-400);
  --accent-deep: var(--gold-600);
  --accent-contrast: #FBF6EC;

  --line: rgba(37, 27, 17, 0.14);
  --line-strong: rgba(37, 27, 17, 0.26);
  --line-gold: rgba(160, 124, 52, 0.5);

  --shadow-soft: 0 30px 70px -45px rgba(74, 55, 30, 0.45);
  --shadow-card: 0 40px 80px -50px rgba(74, 55, 30, 0.5);

  --scrim: linear-gradient(180deg, rgba(20,14,8,0) 0%, rgba(20,14,8,0.3) 60%, rgba(20,14,8,0.72) 100%);
  --scrim-soft: linear-gradient(180deg, rgba(20,14,8,0.05) 0%, rgba(20,14,8,0.45) 100%);
  --vignette: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(74,55,30,0.12) 100%);

  --grain-opacity: 0.03;
}