/* ==========================================================================
   TOKENS - the single source of truth for the whole instrument.
   Two themes share one structure: INSTRUMENT (dark) and DATASHEET (light).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Surfaces ------------------------------------------------------- */
  --bg:            #08090c;
  --bg-sunk:       #05060a;
  --bg-raised:     #0d0f15;
  --surface:       #10131a;
  --surface-2:     #161a23;
  --surface-glass: rgba(16, 19, 26, 0.72);

  /* ---- Rules & edges -------------------------------------------------- */
  --line:          rgba(255, 255, 255, 0.075);
  --line-2:        rgba(255, 255, 255, 0.13);
  --line-strong:   rgba(255, 255, 255, 0.22);

  /* ---- Ink ------------------------------------------------------------ */
  /* Every ink here clears 4.5:1 on --bg. The muted steps were originally
     dimmer and looked better, but they failed at the 12px sizes the mono
     labels use, so legibility won. */
  --ink:           #eceef3;   /* 17.2:1 */
  --ink-2:         #a3a9b8;   /*  8.5:1 */
  --ink-3:         #868d9c;   /*  5.9:1 */
  --ink-4:         #757c8b;   /*  4.6:1 */

  /* ---- Accents: copper (matter) & signal (information) ---------------- */
  --copper:        #e8983f;
  --copper-hi:     #ffb972;
  --copper-lo:     #8d5a20;
  --copper-wash:   rgba(232, 152, 63, 0.12);

  --signal:        #57cfe6;
  --signal-hi:     #9ceaf8;
  --signal-lo:     #235f6d;
  --signal-wash:   rgba(87, 207, 230, 0.11);

  --violet:        #9b8cff;
  --violet-wash:   rgba(155, 140, 255, 0.12);

  /* Selection + focus */
  --select-bg:     rgba(232, 152, 63, 0.26);
  --focus:         var(--signal);

  /* Board substrate - used by the PCB silkscreen + traces */
  --trace:         rgba(232, 152, 63, 0.30);
  --trace-live:    var(--copper);
  --silk:          rgba(255, 255, 255, 0.30);
  --pad:           #1c2029;

  /* Photographic duotone endpoints */
  --duo-dark:      #06070a;
  --duo-light:     #e8983f;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.28);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.4);
  --shadow-glow: 0 0 0 1px var(--line-2), 0 12px 44px rgba(0,0,0,.55);

  /* ---- Type ----------------------------------------------------------- */
  /* Schibsted Grotesk rather than Inter: Inter is the default everything
     reaches for, and its neutrality gives the page nothing. Schibsted was
     drawn for editorial text, so it holds a long paragraph while keeping
     enough character (the single-storey g, the tight apertures) to sit
     under Fraunces without looking like a system fallback. */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale, 320px → 1600px viewport. */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw,  0.735rem);
  --step--1: clamp(0.833rem, 0.80rem + 0.16vw,  0.919rem);
  --step-0:  clamp(1.000rem, 0.95rem + 0.25vw,  1.125rem);
  --step-1:  clamp(1.200rem, 1.12rem + 0.40vw,  1.406rem);
  --step-2:  clamp(1.440rem, 1.31rem + 0.63vw,  1.758rem);
  --step-3:  clamp(1.728rem, 1.53rem + 0.96vw,  2.197rem);
  --step-4:  clamp(2.074rem, 1.78rem + 1.43vw,  2.746rem);
  --step-5:  clamp(2.488rem, 2.06rem + 2.09vw,  3.433rem);
  --step-6:  clamp(2.986rem, 2.37rem + 3.01vw,  4.291rem);
  --step-7:  clamp(3.583rem, 2.70rem + 4.28vw,  5.364rem);

  /* Hero name - its own curve, allowed to get very large. */
  --step-hero: clamp(3.25rem, 0.5rem + 13.4vw, 12rem);

  --leading-tight: 0.94;
  --leading-snug:  1.16;
  --leading-body:  1.62;
  --leading-loose: 1.78;

  --track-tight:  -0.03em;
  --track-normal:  0em;
  --track-wide:    0.08em;
  --track-caps:    0.16em;

  /* ---- Space (4px grid) ------------------------------------------------ */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.5rem;   --sp-6:  2rem;     --sp-7:  2.5rem;   --sp-8:  3rem;
  --sp-9:  4rem;     --sp-10: 5rem;     --sp-11: 6.5rem;   --sp-12: 8rem;

  --section-y:  clamp(5rem, 11vh, 9.5rem);
  --gutter:     clamp(1.25rem, 4.5vw, 4rem);
  --rail:       clamp(0px, 0px, 0px);           /* overridden at md+ */
  --measure:    68ch;
  --max:        1320px;

  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 400ms;
  --dur-4: 700ms;
  --dur-5: 1100ms;

  /* Set to 0 when the visitor prefers reduced motion; multiplied into
     JS-driven animation so one switch calms the entire site. */
  --motion: 1;
}

/* ==========================================================================
   LIGHT

   Warm, but a low-chroma warm grey rather than a yellowed cream. The hue is
   there without the aged-paper cast. A cold version was tried and was worse:
   it drained the warmth the copper accent needs to sit against, and made
   light mode read as a different brand from dark mode rather than the same
   one lit.
   ========================================================================== */

[data-theme='light'] {
  color-scheme: light;

  --bg:            #f3f1ed;
  --bg-sunk:       #e9e6e0;
  --bg-raised:     #fbfaf8;
  --surface:       #fcfbf9;
  --surface-2:     #f4f2ee;
  --surface-glass: rgba(252, 251, 249, 0.80);

  --line:          rgba(28, 24, 20, 0.11);
  --line-2:        rgba(28, 24, 20, 0.19);
  --line-strong:   rgba(28, 24, 20, 0.32);

  --ink:           #17141a;
  --ink-2:         #514b47;
  --ink-3:         #5f5850;
  --ink-4:         #5d564e;

  /* Darker than the dark theme's copper: it has to stay readable as text
     sitting on its own 10% wash (award pills, chips, filter buttons). */
  --copper:        #8a4d0c;   /* 5.1:1 on --copper-wash over paper */
  --copper-hi:     #a85e10;
  --copper-lo:     #d9bb8e;
  --copper-wash:   rgba(138, 77, 12, 0.10);

  --signal:        #0a6b7d;
  --signal-hi:     #0d8398;
  --signal-lo:     #a8d3db;
  --signal-wash:   rgba(10, 107, 125, 0.09);

  --violet:        #5a49c9;
  --violet-wash:   rgba(90, 73, 201, 0.10);

  --select-bg:     rgba(138, 77, 12, 0.20);

  --trace:         rgba(138, 77, 12, 0.34);
  --silk:          rgba(28, 24, 20, 0.34);
  --pad:           #e6e2da;

  --duo-dark:      #241d17;
  --duo-light:     #f3f1ed;

  /* Shadows carry the same warm cast as the ground; a cool shadow on a warm
     page is what makes the two read as different materials. */
  --shadow-1: 0 1px 2px rgba(45,35,25,.08), 0 2px 8px rgba(45,35,25,.06);
  --shadow-2: 0 4px 12px rgba(45,35,25,.10), 0 18px 48px rgba(45,35,25,.10);
  --shadow-glow: 0 0 0 1px var(--line-2), 0 12px 44px rgba(45,35,25,.12);
}

@media (min-width: 900px) {
  :root { --rail: 92px; }
}

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