/* Design tokens for informationinteractions.com.
 *
 * One light scheme, no dark mode and no theme toggle (PLAN §5, user decision).
 * Colours in OKLCH, named after what they stand for:
 *   ink    – the 2026 ink blue #2E3F9E: headings, links, buttons (user 2026-10-23)
 *   ink-700 – the lighter ink #3D56C8, for the low-poly shapes and other decoration only
 *   paper  – Cloud Dancer, PANTONE 11-4201 TCX, as #F0EEE9 (RGB 240 238 233; Pantone's own
 *            pages print no digital value, checked 2026-10-23, so the common screen
 *            equivalent stays until someone reads it off Pantone Connect)
 *   text   – near-black body text (user 2026-10-23, Q14)
 *
 * Every pair below is measured by scripts/contrast.mjs (WCAG 2.x ratio on paper and on
 * white); run it after changing a value. Per-year accents ([data-year]) come from the
 * generated years.css (scripts/year-colours.mjs), never typed here.
 */
:root {
  color-scheme: light;

  --hue-ink: 270;

  /* ---- Named colours ---------------------------------------------------- */
  --ink-900: oklch(41.4% 0.155 270.4); /* #2E3F9E  headings, links, buttons */
  --ink-800: oklch(32% 0.14 270); /* hover of links and buttons */
  --ink-700: oklch(50.2% 0.179 269.5); /* #3D56C8  polygons, decorative only */
  --ink-600: oklch(56% 0.12 270); /* borders that must reach 3:1 on paper */
  --ink-200: oklch(88% 0.045 270); /* bands */
  --ink-100: oklch(95% 0.018 270); /* hero field tint */
  --paper: oklch(94.9% 0.007 88.6); /* #F0EEE9  Cloud Dancer, page background */
  --paper-raised: oklch(100% 0 0); /* white fields inside polygon frames, cards */
  --paper-sunken: oklch(92% 0.009 88.6); /* footer, table heads, code */

  /* ---- Roles ------------------------------------------------------------- */
  --text: oklch(22% 0.01 270);
  --heading: var(--ink-900);
  --text-muted: oklch(42% 0.02 270);
  --link: var(--ink-900);
  --link-hover: var(--ink-800);
  --on-ink: oklch(100% 0 0);
  --border: oklch(82% 0.03 270); /* hairlines next to other cues, never the only edge */
  --border-strong: var(--ink-600);
  /* Mixed in oklab, not oklch: white has hue 0 and an oklch mix would sweep through yellow. */
  --border-firm: color-mix(in oklab, var(--border) 20%, var(--border-strong));
  --focus: oklch(45% 0.19 290);
  --focus-halo: oklch(100% 0 0);

  /* Overridden per [data-year] by years.css; the 2026 pair is the ink. */
  --year-lead: var(--ink-700);
  --year-text: var(--ink-900);
  --year-on-lead: var(--on-ink);

  /* Names the components borrowed from accessibility.sk use (base.css, ad-search,
   * ad-disclosure-nav). They are aliases of the roles above, not new colours. */
  --bg: var(--paper);
  --bg-raised: var(--paper-raised);
  --bg-sunken: var(--paper-sunken);
  --bg-tint: var(--ink-100);
  --bg-inverse: var(--text);
  --text-inverse: var(--on-ink);
  --accent: var(--ink-900);
  --accent-strong: var(--ink-800);
  --accent-soft: var(--ink-200);
  --on-accent: var(--on-ink);
  --amber: oklch(86% 0.13 85); /* <mark> only */

  --shadow-color: oklch(30% 0.04 var(--hue-ink) / 0.14);
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 2px 6px var(--shadow-color), 0 12px 32px -12px var(--shadow-color);
  --shadow-lg: 0 4px 12px var(--shadow-color), 0 24px 48px -16px var(--shadow-color);

  /* ---- Type (from accessibility.sk, unchanged) ------------------------------ */
  --font-sans: "Archivo", "Archivo Fallback", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Fluid type scale: 1.125rem base, ratio 1.2 (mobile) to 1.25 (desktop). */
  --text--1: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  --text-0: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-1: clamp(1.35rem, 1.2rem + 0.6vw, 1.56rem);
  --text-2: clamp(1.62rem, 1.35rem + 1.1vw, 1.95rem);
  --text-3: clamp(1.94rem, 1.5rem + 1.9vw, 2.44rem);
  --text-4: clamp(2.33rem, 1.6rem + 3vw, 3.05rem);
  --text-5: clamp(2.8rem, 1.7rem + 4.6vw, 3.8rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  --measure: 42rem;
  --measure-wide: 54rem;

  /* Archivo width axis: 62–125. Headings at 90 % echo the condensed type of the covers. */
  --width-condensed: 88%;
  --width-heading: 90%;
  --width-normal: 100%;
  --width-wide: 112%;

  /* ---- Space ------------------------------------------------------------ */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.69rem + 0.3vw, 0.94rem);
  --space-s: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.38rem + 0.6vw, 1.88rem);
  --space-l: clamp(2rem, 1.84rem + 0.8vw, 2.5rem);
  --space-xl: clamp(3rem, 2.76rem + 1.2vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.68rem + 1.6vw, 5rem);
  --space-3xl: clamp(6rem, 5.5rem + 2.5vw, 7.5rem);

  --gutter: var(--space-s);
  --content-max: 72rem;

  /* ---- Shape and motion ------------------------------------------------- */
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --radius-l: 1.25rem;
  --radius-pill: 100vmax;

  /* Nothing on this site animates; the borrowed components still read these names. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 0ms;
  --duration-base: 0ms;
  --duration-slow: 0ms;

  --target-min: 1.5rem; /* 24 px, WCAG 2.5.8 */
  --target-comfortable: 2.75rem; /* 44 px */
}

/* More contrast on request: pure text colours, hard edges, no shadows. The polygons
 * become outlines (components.css). */
@media (prefers-contrast: more) {
  :root {
    --text: oklch(10% 0 0);
    --text-muted: oklch(25% 0 0);
    --border: oklch(35% 0 0);
    --border-strong: var(--text);
    --border-firm: var(--text);
    --link: oklch(30% 0.14 var(--hue-ink));
    --heading: oklch(30% 0.14 var(--hue-ink));
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}