/* Numen landing v4 — design tokens. Every value used in styles.css lives here. */
:root {
  color-scheme: light;

  /* Palette (TZ §2) */
  --ivory: oklch(98% 0.012 75);        /* #FFF8F1 */
  --graphite: oklch(33% 0.02 220);     /* #2C3C43 */
  --terracotta: oklch(60% 0.12 40);    /* #C66A4A */
  --terracotta-deep: oklch(52% 0.12 40);
  --night: oklch(15% 0.012 230);       /* #0F1418 */

  /* Scene tones sampled from the moodboard */
  --amber: oklch(78% 0.13 70);         /* tea light */
  --fog: oklch(62% 0.02 230);          /* ridge mist */
  --fog-deep: oklch(40% 0.025 230);
  --dusk: oklch(28% 0.04 50);          /* candle table */
  --street: oklch(18% 0.02 240);       /* rain night */
  --window-warm: oklch(88% 0.11 80);   /* lit window */

  /* Surfaces & ink */
  --page-bg: var(--ivory);
  --ink: var(--graphite);
  --ink-soft: oklch(45% 0.015 220);
  --ink-mute: oklch(60% 0.012 220);
  --paper: oklch(99% 0.006 80);
  --line: oklch(88% 0.012 80);
  --on-dark: oklch(96% 0.01 80);
  --on-dark-soft: oklch(80% 0.01 80);
  --on-dark-mute: oklch(66% 0.01 80);

  /* Scrims over media */
  --scrim-bottom: linear-gradient(180deg, transparent 35%, oklch(15% 0.012 230 / 0.72) 100%);
  --scrim-top: linear-gradient(180deg, oklch(15% 0.012 230 / 0.55) 0%, transparent 40%);
  --scrim-side: linear-gradient(90deg, oklch(15% 0.012 230 / 0.7) 0%, transparent 60%);
  --glass: oklch(15% 0.012 230 / 0.35);
  --glass-line: oklch(100% 0 0 / 0.16);
  --matte: oklch(15% 0.012 230 / 0.78);   /* readable panel over a photo */

  /* Light thread */
  --thread: oklch(90% 0.14 85);
  --thread-glow: oklch(90% 0.14 85 / 0.55);

  /* Type */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-text: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --t-display: clamp(2.75rem, 1.4rem + 6.2vw, 7.5rem);
  --t-h2: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
  --t-h3: clamp(1.4rem, 1.1rem + 1.4vw, 2.3rem);
  --t-lead: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --t-small: clamp(0.8rem, 0.78rem + 0.12vw, 0.9rem);
  --t-eyebrow: 0.75rem;
  --lh-display: 0.98;
  --lh-tight: 1.15;
  --lh-body: 1.55;
  --track-eyebrow: 0.18em;
  --track-display: -0.02em;
  --measure: 60ch;
  --measure-narrow: 38ch;

  /* Space (8pt) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;
  --s-9: 12rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --container: 1440px;

  /* Shape */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --hairline: 1px;
  --phone-w: clamp(260px, 30vw, 330px);
  --phone-ratio: 9 / 18.5;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 700ms;
  --d-breath: 4200ms;
  --d-page: 900ms;
  --d-drift: 26s;
  --d-ambient: 96s;        /* light moving under the long dark blocks */
  --window-dim: 0.35;

  /* Elevation */
  --shadow-soft: 0 18px 50px oklch(20% 0.02 60 / 0.16);
  --shadow-phone: 0 40px 90px oklch(15% 0.02 60 / 0.45), 0 0 0 1px oklch(100% 0 0 / 0.08);
  --grain-opacity: 0.045;

  /* Sizes */
  --tile-w: clamp(240px, 72vw, 420px);
  --tile-ratio: 4 / 5;
  --nav-h: 4.5rem;
  --icon: 1.25rem;
  --z-nav: 50;
  --z-signal: 30;
  --z-grain: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-slow: 0ms;
    --d-page: 0ms;
  }
}