/* ─────────────────────────────────────────────────────────────────────
   tokens.css
   The design system in code. Every value in this file is the source of
   truth; everywhere else, prefer var(--token) over literals.

   See design-system-v3.md §"Design tokens" and §"Parametrization".
   When this file disagrees with the system, this file is wrong.

   ── Parametrization principle (v3) ──────────────────────────────────
   Batch 6: Schibsted Grotesk chosen by the client. The accent is still
   UNDER REVIEW. All prior typefaces remain in typography.css for revert.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Type families ───────────────────────────────────────────────
     Schibsted Grotesk: client's chosen protagonist (batch 6).
     Geist Mono stays as the accent mono. Inter stays as infrastructure. */
  --font-display: "Schibsted Grotesk", sans-serif;  /* statement, headlines */
  --font-body:    "Schibsted Grotesk", sans-serif;  /* the letter */
  --font-label:   "Schibsted Grotesk", sans-serif;  /* sidebar labels */
  --font-mono:    "Geist Mono", monospace;           /* paren glyphs, Lain, caret */
  --font-ui:      "Inter", system-ui, -apple-system, sans-serif;  /* captions, folios, microcopy, inputs */

  /* Label type step: sidebar labels and section-label headings. The v3
     inversion, sidebar clearly larger than the 19px body, at the value the
     v3.2 type scale documents. */
  --type-label:   1.5rem;   /* 24px, vs 19px body (per the v3.2 type scale) */

  /* ── Color ───────────────────────────────────────────────────────
     Cold palette. Blue-graphite ink on cool lavender-gray paper.
     Never #000, never #FFF. */
  --ink:         #283541;   /* body text, active nav, plate fields   */
  --ink-soft:    #485A6A;   /* secondary body, intro copy            */
  --ink-muted:   #A0B4C3;   /* captions, folios, the building line   */
  --paper:       #F3F3F6;   /* primary background                    */
  --paper-inset: #EAEAEF;   /* inset surfaces, sparingly             */
  --rule:        #D8D8E0;   /* hairline dividers, borders            */

  /* Solid accent. UNDER REVIEW (see design-system-v3 §"Accent
     decision"). v2 electric blue held as the base. Links, caret,
     paren glyphs, focus rings. */
  --accent:      #394CF9;

  /* Active-section highlight tint, and its optional pin.
     --hl is the lavender Mei likes (the accent diluted). It is a
     SEPARATE token from --accent on purpose: even if --accent later
     moves to ink, this lavender highlight is retained. Do not collapse
     --hl into --accent, and do not derive one from the other. */
  --hl:          rgba(57, 76, 249, 0.14);   /* a visible but gentle wash over the active section */
  --hl-opaque:   #D9DCF6;                  /* --hl composited on --paper; used on mobile where
                                              overlapping inline-padding needs opacity = 1 to
                                              avoid double-alpha banding between lines */
  --pin:         #394CF9;

  /* Reading focus parameters (the active-section system).
     --recede is how faint an unscrolled section sits: deliberately
     fainter than v2's --ink-muted treatment (Mei). --focus-scale is the
     slight step-forward of the active block (transform, never font-size,
     so it does not reflow the column). */
  --recede:      0.32;
  --focus-scale: 1.032;

  /* Selection follows the accent (a low-opacity wash of whatever the
     accent currently is), so it tracks the pending decision too. */
  --selection-bg:   color-mix(in srgb, var(--accent) 18%, transparent);
  --selection-text: var(--ink);

  /* ── Spacing (8px base, compressed) ─────────────────────────────── */
  --s-0_5:  0.25rem;   /*  4px */
  --s-0_75: 0.375rem;  /*  6px (active-block tint balancing) */
  --s-1:    0.5rem;    /*  8px */
  --s-1_5: 0.75rem;   /* 12px */
  --s-2:   1rem;      /* 16px */
  --s-3:   1.5rem;    /* 24px */
  --s-4:   2rem;      /* 32px */
  --s-6:   3rem;      /* 48px */
  --s-8:   4rem;      /* 64px */
  --s-10:  5rem;      /* 80px */

  /* ── Layout ─────────────────────────────────────────────────────── */
  --max-w:        1160px;
  --pad-x-mobile: var(--s-2);     /* 16px */
  --pad-x-tablet: var(--s-4);     /* 32px */
  --pad-x:        var(--s-8);     /* 64px */
  --grid-gap:     var(--s-6);     /* 48px, editorial gutter            */
  --sidebar-w:    clamp(18rem, 25vw, 20.5rem); /* fits the 24px labels; longest label clears the gutter */
  --measure:      38rem;          /* reading measure cap (~62ch @19px) */

  /* ── Radius (near-zero) ─────────────────────────────────────────── */
  --r-sharp: 0;
  --r-soft:  2px;                 /* inputs + buttons only             */

  /* ── Motion ─────────────────────────────────────────────────────── */
  --d-hover: 150ms;
  --d-state: 300ms;
  --d-modal: 200ms;
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Editorial constants ────────────────────────────────────────── */
  --logo-opacity-light: 0.35;
  --pin-size: 8px;
}

/* Page baseline. The cold paper, the cool ink. Never #000, never #FFF. */
html, body {
  background: var(--paper);
  color: var(--ink);
}

/* Page entry: fade in once fonts and images are ready. main.js toggles
   the `.loaded` class on <html> after the `load` event. */
html { opacity: 0; transition: opacity 400ms var(--ease); }
html.loaded { opacity: 1; }

/* Cool selection that matches the highlight family. */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* Reduced motion: trim transitions, keep state changes legible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}