/* ============================================================
   DR. ELAINE ISAAC — 70 YEARS OF GRACE
   Design language: CINEMATIC FILM-GRAIN NOIR
   An evolution of the original purple + gold, taken deeper:
   obsidian with a violet undertone, restrained antique gold,
   a sparse candlelight accent reserved for emotional beats.
   ============================================================ */

:root {
  /* ---- CORE PALETTE (OKLCH) ---------------------------- */
  --noir-void:      oklch(11% 0.018 288);   /* deepest black-violet — page base */
  --noir-obsidian:  oklch(14% 0.028 288);
  --noir-surface:   oklch(18% 0.040 290);   /* lifted panels / cards */
  --noir-surface-2: oklch(22% 0.050 292);
  --violet-deep:    oklch(30% 0.090 300);
  --violet-mid:     oklch(40% 0.120 303);
  --violet-glow:    oklch(52% 0.150 305);   /* atmospheric bloom only */

  /* ---- GOLD (restrained, antique) ---------------------- */
  --gold-antique:   oklch(70% 0.105 84);    /* the workhorse gold — hairlines, small caps */
  --gold:           oklch(77% 0.125 85);
  --gold-bright:    oklch(87% 0.140 90);    /* candlelight — used sparingly, emotional peaks */
  --champagne:      oklch(91% 0.048 90);

  /* ---- INK (warm, higher-contrast than v1) ------------- */
  --ink-100: oklch(96% 0.012 90);           /* emotional body text, near-white warm */
  --ink-85:  oklch(85% 0.020 295);
  --ink-70:  oklch(70% 0.028 298);          /* secondary */
  --ink-55:  oklch(56% 0.030 300);          /* muted labels */
  --ink-40:  oklch(44% 0.028 300);          /* faint */

  /* ---- SEMANTIC ---------------------------------------- */
  --bg:            var(--noir-void);
  --text:          var(--ink-85);
  --text-emphasis: var(--ink-100);
  --text-muted:    var(--ink-55);
  --accent:        var(--gold);
  --accent-soft:   var(--gold-antique);
  --accent-peak:   var(--gold-bright);
  --hairline:      color-mix(in oklch, var(--gold-antique) 22%, transparent);
  --hairline-soft: color-mix(in oklch, var(--gold-antique) 12%, transparent);

  /* ---- TYPE FAMILIES ----------------------------------- */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-script:  'Great Vibes', 'Segoe Script', cursive;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* ---- FLUID TYPE SCALE -------------------------------- */
  --step--1: clamp(0.78rem, 0.74rem + 0.20vw, 0.90rem);   /* micro-labels */
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.15rem);   /* base */
  --step-1:  clamp(1.20rem, 1.08rem + 0.55vw, 1.45rem);   /* lead body / serif */
  --step-2:  clamp(1.45rem, 1.24rem + 0.95vw, 1.90rem);
  --step-3:  clamp(1.85rem, 1.50rem + 1.60vw, 2.70rem);   /* h3 */
  --step-4:  clamp(2.40rem, 1.80rem + 2.80vw, 3.90rem);   /* section titles */
  --step-5:  clamp(3.20rem, 2.10rem + 5.00vw, 6.40rem);   /* hero / climax */
  --step-6:  clamp(4.00rem, 2.20rem + 8.00vw, 9.00rem);   /* the big number: 70 */

  /* ---- SPACE / RHYTHM ---------------------------------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.75rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;
  --space-section: clamp(5rem, 3.5rem + 7vw, 11rem);
  --measure: 62ch;              /* readable text width */
  --container: 1240px;

  /* ---- RADII ------------------------------------------- */
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 22px;

  /* ---- MOTION TOKENS (cinematic) ----------------------- */
  --dur-xfast: 180ms;
  --dur-fast:  340ms;
  --dur:       620ms;
  --dur-slow:  1100ms;
  --dur-cine:  1800ms;
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cine: cubic-bezier(0.62, 0.01, 0.2, 1);
  --ease-out-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- ATMOSPHERE -------------------------------------- */
  --grain-opacity: 0.055;
  --vignette: radial-gradient(120% 100% at 50% 42%,
                transparent 55%,
                color-mix(in oklch, var(--noir-void) 55%, transparent) 82%,
                color-mix(in oklch, black 70%, transparent) 100%);
  --bloom-purple: radial-gradient(circle at 50% 50%,
                    color-mix(in oklch, var(--violet-glow) 30%, transparent) 0%,
                    transparent 68%);

  /* ---- SHADOWS / GLOWS --------------------------------- */
  --shadow-frame: 0 24px 70px -20px rgba(0,0,0,0.75), 0 4px 18px rgba(0,0,0,0.5);
  --glow-gold:   0 0 40px color-mix(in oklch, var(--gold) 22%, transparent);
  --glow-violet: 0 0 60px color-mix(in oklch, var(--violet-glow) 25%, transparent);

  /* ---- CINEMA LETTERBOX -------------------------------- */
  --bar-height: clamp(28px, 6vh, 64px);

  /* ---- Z LAYERS ---------------------------------------- */
  --z-bg: 0;
  --z-grain: 2;
  --z-vignette: 3;
  --z-content: 10;
  --z-letterbox: 800;
  --z-nav: 1000;
  --z-music: 1100;
  --z-lightbox: 10000;
  --z-overlay: 99990;
}

/* Reduced-motion: quiet the atmosphere, never remove meaning */
@media (prefers-reduced-motion: reduce) {
  :root { --grain-opacity: 0.03; }
}