/* =====================================================================
   BJORK.LIVE — design tokens
   The whole identity lives in this one file. Swapping the palette or the
   type is a change here and nowhere else.

   Dark-first, deliberately. The palette was measured against WCAG before
   being adopted (see docs/decisions-18aug2026-001.md): on the near-black
   ground every text colour below clears 4.5:1, while the aubergine and
   slate manage 1.35:1 and 3.78:1 — so those two are SURFACE colours and
   must never carry body text.
   ===================================================================== */

:root {
  /* ---- Ground and text ---------------------------------------------- */
  --ink:            #0B0B0D;   /* page ground                            */
  --paper:          #E9E7E2;   /* body text on ink — 15.91:1             */
  --paper-bright:   #FFFFFF;   /* headings that need to ring — 19.66:1   */
  --muted:          #8A948F;   /* dates, venues, meta — 6.29:1           */

  /* ---- The one accent ---------------------------------------------- */
  /* Used sparingly: links, active filters, "on sale" buttons, the
     recording quality badge. 6.34:1 on ink, so it is safe for body-sized
     text — which most bright accents are not. */
  --accent:         #FF5A36;
  --accent-quiet:   #B36A8C;   /* secondary accent, 5.02:1               */

  /* ---- Surfaces ---------------------------------------------------- */
  /* Cards, panels, era tints. NOT for text on ink. */
  --surface:        #14141a;   /* one step off the ground                */
  --surface-deep:   #3B1E3F;   /* aubergine — section and era tint       */
  --surface-cool:   #5D6D8D;   /* slate — large UI, chart series         */

  /* ---- Rare light surfaces ----------------------------------------- */
  /* For a Vespertine-pale panel or an inverted callout. Text on these
     must be --ink, never --paper. */
  --pale:           #C7C9F1;
  --pale-ice:       #E6F2F6;

  /* ---- Lines ------------------------------------------------------- */
  --rule:           #23232b;
  --rule-strong:    #34343f;

  /* ---- Type -------------------------------------------------------- */
  /* System stacks until a display face is licensed — no webfont means no
     render-blocking request and no layout shift on first paint. */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale — no media queries needed for headings. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.33rem, 1.2rem + 0.6vw, 1.7rem);
  --step-2:  clamp(1.78rem, 1.5rem + 1.3vw, 2.55rem);
  --step-3:  clamp(2.37rem, 1.8rem + 2.6vw, 3.8rem);

  /* ---- Space and shape --------------------------------------------- */
  --gap-xs: 0.25rem;
  --gap-s:  0.5rem;
  --gap-m:  1rem;
  --gap-l:  2rem;
  --gap-xl: 4rem;
  --measure: 68ch;          /* article reading width                    */
  --radius: 2px;            /* nearly square — editorial, not app-like  */
}

/* The site is dark by design, not by preference, so there is no light
   theme to toggle. This block only honours a reduced-transparency or
   high-contrast request. */
@media (prefers-contrast: more) {
  :root {
    --muted: #B8C0BB;
    --rule:  #4a4a56;
  }
}

@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;
  }
}