/* ==========================================================================
   Design tokens — "classic elegant opera" (dark: black & gold)
   Single source of truth for color, type, spacing. Everything else in the
   stylesheets references these; no raw hex or magic numbers elsewhere.

   Palette philosophy: warm near-black (not pure #000) + warm parchment text
   (not pure #fff) + gold as the accent + deep wine as a secondary accent.
   Gold is for headings, rules and small labels — never body copy.
   ========================================================================== */

:root {
  /* --- Raw palette ------------------------------------------------------ */
  /* Glossy near-blacks (backgrounds / surfaces) — neutral, piano-lacquer,
     a whisper of cool so warm gold/cream text reads as "black & gold". */
  --color-black: #000000;        /* deepest — footer, hero base            */
  --color-ink: #0a0a0b;          /* page background — glossy near-black     */
  --color-ink-raised: #121214;   /* raised sections                        */
  --color-ink-card: #18181b;     /* cards / panels (a touch lighter)       */
  --color-ink-line: #2c2c31;     /* hairline borders on dark               */

  /* Warm light tones (text) */
  --color-cream: #f4ecdd;        /* primary text — warm off-white          */
  --color-cream-soft: #c7b8a1;   /* secondary / muted text                 */

  /* Accents */
  --color-gold: #c6a568;         /* primary accent — headings, rules       */
  --color-gold-bright: #e0c88f;  /* hover / emphasis gold                  */
  --color-gold-soft: #d8bf8c;    /* gold on the very darkest surfaces      */
  --color-burgundy: #7a2831;     /* secondary accent — primary buttons     */
  --color-burgundy-deep: #5c1a1f;/* hover / pressed                        */

  /* --- Semantic colors -------------------------------------------------- */
  --text-primary: var(--color-cream);
  --text-secondary: var(--color-cream-soft);
  --text-on-dark: var(--color-cream);
  --text-accent: var(--color-gold);

  --surface-page: var(--color-ink);
  --surface-raised: var(--color-ink-raised);
  --surface-card: var(--color-ink-card);
  --surface-dark: var(--color-black);

  /* Light "press-cutting" card — used only for the critique blocks, so those
     read like a printed clipping against the dark page. Warm ivory, not pure
     white, so it doesn't glare. Text goes dark; accents use ink/burgundy. */
  --surface-card-light: #fbf8f1;      /* warm ivory */
  --text-ink-muted: #5b5147;          /* warm grey for meta text on ivory */

  --border-hairline: var(--color-ink-line);
  --border-accent: var(--color-gold);

  --link: var(--color-gold);
  --link-hover: var(--color-gold-bright);
  --focus-ring: var(--color-gold);

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  /* Her name, in two registers. Deliberately NOT used for other headings —
     these are the one thing on the site that should read as her signature.
       · --font-wordmark  the header logo only (cursive)
       · --font-name      the home hero H1 and the Biographie title
     The cursive is kept out of the big headings on purpose: a script at 4.5rem
     starts to read as decoration rather than as a name. */
  --font-wordmark: "Parisienne", "Snell Roundhand", cursive;
  --font-name: "Cormorant Garamond", "Playfair Display", Georgia, serif;

  /* Modular type scale (~1.25 major third), fluid where it matters */
  --text-xs: 0.79rem;
  --text-sm: 0.889rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.266rem;
  --text-xl: 1.602rem;
  --text-2xl: 2.027rem;
  --text-3xl: 2.566rem;
  --text-hero: clamp(2.75rem, 6vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.18em;   /* small-caps eyebrow labels */

  /* --- Spacing scale (8px base) ----------------------------------------- */
  --space-1: 0.5rem;   /* 8  */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-5: 3rem;     /* 48 */
  --space-6: 4rem;     /* 64 */
  --space-7: 6rem;     /* 96 */
  --space-8: 8rem;     /* 128 */

  /* Fluid vertical rhythm between major page sections */
  --section-gap: clamp(3.5rem, 8vw, 7rem);

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1120px;
  --container-narrow: 720px;    /* long-form reading measure */
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* --- Borders & radii (restrained — no rounded-everything) ------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --hairline: 1px;

  /* --- Shadows (deeper on a dark theme to lift panels) ------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);

  /* --- Lacquer sheens (very low-alpha warm reflections + vignette) ------
     Layered as background-image over a solid surface to give glossy-black
     depth instead of dead-flat fill. Warm tint (255,250,238) ties to gold. */
  --sheen-top: radial-gradient(135% 85% at 50% 0%,
    rgba(255, 250, 238, 0.045), rgba(255, 250, 238, 0) 58%);
  --sheen-top-strong: radial-gradient(120% 95% at 50% -6%,
    rgba(255, 250, 238, 0.07), rgba(255, 250, 238, 0) 55%);
  --vignette: radial-gradient(130% 130% at 50% 22%,
    transparent 58%, rgba(0, 0, 0, 0.55) 100%);

  /* --- Motion ----------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Elevation ordering ----------------------------------------------- */
  --z-subnav: 90;   /* below the main header, above page content */
  --z-header: 100;
  --z-overlay: 200;

  /* --- Layout metrics --------------------------------------------------- */
  --header-height: 72px;  /* matches .site-header__inner min-height */
}