/* ==========================================================================
   Undertold design tokens
   "Felt & Tungsten": deep studio-felt green, warm paper ink, one tungsten
   signal colour. Dark is the default; light ("paper") is a full token set.

   Theme switching
     <html data-theme="dark">    default (also applies with no attribute)
     <html data-theme="light">   paper theme
     <html data-theme="auto">    follows the OS setting
   Any element can carry data-theme to re-theme a section, e.g.
     <section data-theme="light">…</section>
   (base.css gives every [data-theme] element its own --bg and --ink.)
   ========================================================================== */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg: #11281f;            /* studio felt */
  --bg-deep: #0c1f18;       /* page edges, footer, scrims */
  --surface: #173229;       /* cards, inputs */
  --surface-2: #1e3d33;     /* hover, chips, raised */
  --surface-3: #27493e;     /* pressed, selected */
  --overlay: rgba(7, 20, 15, 0.72);     /* modal backdrop */
  --glass: rgba(17, 40, 31, 0.82);      /* sticky nav, mini player */

  /* Ink */
  --ink: #eee9dc;           /* paper white, 12.9:1 on --bg */
  --ink-muted: #a9b7ad;     /* secondary text, 7.5:1 */
  --ink-faint: #93a59b;     /* captions, placeholders, 6.0:1 (4.6 on surface-2) */
  --ink-inverse: #11281f;   /* text on --ink fills */

  /* Lines */
  --line: rgba(238, 233, 220, 0.14);
  --line-strong: rgba(238, 233, 220, 0.28);
  --line-control: rgba(238, 233, 220, 0.42);  /* input borders, 3:1+ */

  /* Signal: tungsten. Use sparingly — it marks "live", "now", "primary". */
  --accent: #f2a33a;        /* fills, the dot, focus rings */
  --accent-hover: #f7b65c;
  --accent-ink: #1f1503;    /* text on --accent, 8.6:1 */
  --accent-text: #f2a33a;   /* accent-coloured text on --bg, 7.5:1 (5.7 on surface-2) */
  --accent-soft: rgba(242, 163, 58, 0.14);
  --accent-glow: 0 0 0 1px rgba(242, 163, 58, 0.5), 0 0 28px rgba(242, 163, 58, 0.28);

  /* Status */
  --danger: #f78f78;
  --danger-soft: rgba(247, 143, 120, 0.14);
  --success: #8bd3a5;
  --success-soft: rgba(139, 211, 165, 0.14);
  --info: #9cc3d5;
  --info-soft: rgba(156, 195, 213, 0.14);

  --focus: #f2a33a;

  /* Shadows are tinted with the felt, never neutral grey */
  --shadow-1: 0 1px 2px rgba(3, 12, 9, 0.45);
  --shadow-2: 0 12px 32px -14px rgba(3, 12, 9, 0.7), 0 2px 6px rgba(3, 12, 9, 0.35);
  --shadow-3: 0 28px 70px -20px rgba(2, 10, 7, 0.85), 0 6px 18px rgba(2, 10, 7, 0.4);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --logo-dot: #f2a33a;
}

/* Paper theme */
[data-theme="light"] {
  color-scheme: light;

  --bg: #e5eae2;            /* sage paper, not cream */
  --bg-deep: #d9e0d5;
  --surface: #f3f6f1;
  --surface-2: #dce3d8;
  --surface-3: #cdd6c9;
  --overlay: rgba(17, 40, 31, 0.55);
  --glass: rgba(229, 234, 226, 0.86);

  --ink: #11281f;           /* felt becomes ink, 12.8:1 */
  --ink-muted: #45574e;     /* 6.3:1 */
  --ink-faint: #52635a;     /* 5.2:1 (4.7 on bg-deep) */
  --ink-inverse: #eee9dc;

  --line: rgba(17, 40, 31, 0.14);
  --line-strong: rgba(17, 40, 31, 0.3);
  --line-control: rgba(17, 40, 31, 0.5);      /* input borders, 3:1 */

  --accent: #f2a33a;        /* same tungsten fill */
  --accent-hover: #e8952a;
  --accent-ink: #1f1503;
  --accent-text: #844b00;   /* darker for text on paper, 5.8:1 */
  --accent-soft: rgba(242, 163, 58, 0.2);
  --accent-glow: 0 0 0 1px rgba(194, 120, 20, 0.55), 0 0 24px rgba(242, 163, 58, 0.35);

  --danger: #a5331b;
  --danger-soft: rgba(165, 51, 27, 0.1);
  --success: #24653d;
  --success-soft: rgba(36, 101, 61, 0.1);
  --info: #2a5a72;
  --info-soft: rgba(42, 90, 114, 0.1);

  --focus: #844b00;

  --shadow-1: 0 1px 2px rgba(17, 40, 31, 0.12);
  --shadow-2: 0 14px 32px -16px rgba(17, 40, 31, 0.35), 0 2px 6px rgba(17, 40, 31, 0.08);
  --shadow-3: 0 30px 70px -24px rgba(17, 40, 31, 0.45), 0 6px 18px rgba(17, 40, 31, 0.12);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --logo-dot: #e0901f;
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;
    --bg: #e5eae2; --bg-deep: #d9e0d5; --surface: #f3f6f1; --surface-2: #dce3d8; --surface-3: #cdd6c9;
    --overlay: rgba(17, 40, 31, 0.55); --glass: rgba(229, 234, 226, 0.86);
    --ink: #11281f; --ink-muted: #45574e; --ink-faint: #52635a; --ink-inverse: #eee9dc;
    --line: rgba(17, 40, 31, 0.14); --line-strong: rgba(17, 40, 31, 0.3); --line-control: rgba(17, 40, 31, 0.5);
    --accent-hover: #e8952a; --accent-text: #844b00; --accent-soft: rgba(242, 163, 58, 0.2);
    --accent-glow: 0 0 0 1px rgba(194, 120, 20, 0.55), 0 0 24px rgba(242, 163, 58, 0.35);
    --danger: #a5331b; --danger-soft: rgba(165, 51, 27, 0.1);
    --success: #24653d; --success-soft: rgba(36, 101, 61, 0.1);
    --info: #2a5a72; --info-soft: rgba(42, 90, 114, 0.1);
    --focus: #844b00;
    --shadow-1: 0 1px 2px rgba(17, 40, 31, 0.12);
    --shadow-2: 0 14px 32px -16px rgba(17, 40, 31, 0.35), 0 2px 6px rgba(17, 40, 31, 0.08);
    --shadow-3: 0 30px 70px -24px rgba(17, 40, 31, 0.45), 0 6px 18px rgba(17, 40, 31, 0.12);
    --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --logo-dot: #e0901f;
  }
}

:root {
  /* ---- Type ------------------------------------------------------------
     Archivo  — display (condensed, "title card") and UI (normal width)
     Newsreader — long-form reading, transcripts, eyebrows, pull quotes   */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --stretch-display: 68%;   /* font-stretch for display headings */
  --stretch-tight: 82%;     /* cover meta, compact labels */

  /* Scale follows the classic typographic scale (12 14 16 18 21 24 36 48 72 96),
     fluid at the display end. */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.875rem;     /* 14 */
  --fs-md: 1rem;         /* 16 */
  --fs-lg: 1.125rem;     /* 18 */
  --fs-xl: 1.3125rem;    /* 21 */
  --fs-2xl: 1.5rem;      /* 24 */
  --fs-3xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);   /* 28 → 36 */
  --fs-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3rem);       /* 36 → 48 */
  --fs-5xl: clamp(2.75rem, 1.5rem + 5.2vw, 4.5rem);     /* 44 → 72 */
  --fs-6xl: clamp(3.25rem, 1.2rem + 8.4vw, 6.5rem);     /* 52 → 104 */

  --lh-tight: 0.94;      /* display */
  --lh-snug: 1.15;       /* headings, UI */
  --lh-ui: 1.4;
  --lh-text: 1.62;       /* serif reading text */

  --tracking-display: -0.012em;
  --tracking-ui: 0;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Radii: hierarchy, not one value everywhere ----
     cover 3px (a printed sleeve) · control 8px · card 12px · sheet 20px · pill */
  --radius-cover: 3px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --dur-1: 120ms;   /* hover, press */
  --dur-2: 200ms;   /* small state changes */
  --dur-3: 320ms;   /* panels, menus */
  --dur-4: 560ms;   /* page-level reveal (use once per page) */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-tape: cubic-bezier(0.3, 0, 0.1, 1);   /* "tape spooling up" */

  /* ---- Layers ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;     /* site nav */
  --z-player: 200;     /* mini player */
  --z-dropdown: 300;   /* menus */
  --z-overlay: 400;    /* modal backdrop */
  --z-modal: 410;
  --z-toast: 500;

  /* ---- Widths ---- */
  --w-prose: 40rem;     /* ~68 characters of Newsreader */
  --w-narrow: 46rem;
  --w-content: 74rem;
  --w-wide: 90rem;
  --gutter: clamp(1rem, 0.6rem + 2.2vw, 2.5rem);   /* 16px at 360px */

  /* ---- Component sizes ---- */
  --nav-h: 4rem;
  --mini-player-h: 4.5rem;
  --control-h: 2.875rem;    /* 46px — touch friendly */
  --control-h-sm: 2.25rem;
  --control-h-lg: 3.5rem;

  /* Film grain (monochrome noise), used by .cover and .grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
    --dur-4: 0.01ms;
  }
}