/* ==========================================================================
   DESIGN TOKENS: every color, size and timing lives here.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Palette */
  --color-background: #efe8d8;   /* warm paper */
  --color-surface: #f8f3e7;      /* lighter paper */
  --color-ink: #151311;          /* near-black */
  --color-muted: #5b544a;
  --color-border: #151311;
  --color-accent-1: #e4572e;     /* burnt orange */
  --color-accent-2: #dfe23b;     /* acid yellow */
  --color-accent-3: #ee93b4;     /* bubblegum, faded */
  --color-accent-4: #8fae8b;     /* faded green */
  --color-cobalt: #2c46d4;
  --color-red: #c7241c;
  --color-forest: #1d3a2d;
  --color-night: #141312;
  --color-night-2: #22201d;

  /* Named accents used by content (accent/color fields) */
  --orange: var(--color-accent-1);
  --yellow: var(--color-accent-2);
  --pink: var(--color-accent-3);
  --green: var(--color-accent-4);
  --cobalt: var(--color-cobalt);
  --red: var(--color-red);
  --ink: var(--color-ink);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --stretch-display: 62%;
  --stretch-ui: 88%;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --fs-xl: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);
  --fs-2xl: clamp(3rem, 1.8rem + 6vw, 8rem);
  --fs-mega: clamp(7rem, 2rem + 24vw, 26rem);

  --lh-tight: 0.88;
  --lh-snug: 1.1;
  --lh-body: 1.55;

  /* Spacing scale */
  --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: 4.5rem;
  --sp-9: 7rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  /* Widths */
  --max-page: 1680px;
  --max-text: 62ch;
  --max-narrow: 44rem;

  /* Lines & shapes */
  --bw: 1.5px;
  --bw-thick: 3px;
  --radius-pill: 999px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-print: 5px 5px 0 var(--color-ink);

  /* Motion */
  --t-fast: 140ms;
  --t-med: 320ms;
  --t-slow: 700ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.5, 1.8, 0.4, 0.8);

  /* Layers */
  --z-bg: 0;
  --z-content: 1;
  --z-sticky: 50;
  --z-toast: 90;

  /* Chrome sizes */
  --nav-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Fixed colours that never flip with the theme */
:root { --ink-fixed: #151311; --cream-fixed: #f8f3e7; }

/* ==========================================================================
   DARK MODE: html[data-theme="dark"] (only when the visitor chooses it;
   everyone starts in light mode). The page, cards, text and rules flip; every
   coloured panel and every panel that is dark by design keeps its light-mode
   tokens ("islands" below), so the palette stays exactly as colourful.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #0f0e0d;
  --color-surface: #1b1917;
  --color-ink: #f3ecdc;
  --color-muted: #aaa295;
  --color-border: #f3ecdc;
  --color-night: #050505;
}

:root[data-theme="dark"] :is(
  .bg-orange, .bg-yellow, .bg-pink, .bg-green,
  .look-band, .look-ledger, .look-dark, .look-poster,
  .ticker, .toast, .cover-index-title, .cover-lead, .brand,
  .site-footer, .phonenav, .contact, .page-hero-about, .page-hero-contact, .consent,
  .shout-kicker, .react[aria-pressed="true"]
) {
  --color-background: #efe8d8;
  --color-surface: #f8f3e7;
  --color-ink: #151311;
  --color-muted: #5b544a;
  --color-border: #151311;
  --color-night: #141312;
  color-scheme: light;
}
/* Islands that don't set their own text colour */
:root[data-theme="dark"] :is(.ticker, .cover-index-title, .page-hero-about, .page-hero-contact) { color: var(--color-ink); }