/* ============================================================================
   TOKENS — the only file in src/ that may contain colour literals.
   Palette provenance (brand/LOGO MOOKO PNG.png: IHDR 2000x2000, 8-bit, colortype 6 RGBA,
   alpha histogram 0:0 / 1-254:0 / 255:4,000,000 — fully opaque; sampled on 60k opaque px).
   k-means (k=8, seed 1) cluster centres, each SNAPPED to the nearest real pixel (x,y):
     sky     centre 136,189,255  share 87.2%  -> #88bdff @ (0,0)
     white   centre 254,254,254  share  8.4%  -> #fefefe @ (926,636)
     ink     centre  13, 18, 34  share  4.0%  -> #0d1222 @ (682,769)
     tongue  centre 240,114,147  share  0.2%  -> #f07293 @ (1177,1290)
   Cross-check: brand/LOGO MOOKO PNG...png (colortype 6, 3,485,222 fully transparent px whose rgb is
   pure 0,0,0, 14,585 semi-alpha edge px) snaps to #fdfdfd / #0c1122 / #f17192 — same four colours;
   that file is therefore resized premultiplied (RGBa) to avoid black fringes.
   brand/LOGO MOOKO JPG.jpg.jpeg (JFIF, RGB, lossy) agrees within 1-2 levels; not used as a source.
   Everything else on the page is derived with color-mix() from these four — no other literals.
   ========================================================================== */
:root {
  --sky: #88bdff;
  --white: #fefefe;
  --ink: #0d1222;
  --tongue: #f07293;

  /* derived surfaces — mixes only */
  --bg: color-mix(in srgb, var(--sky) 16%, var(--white));
  --bg-deep: color-mix(in srgb, var(--sky) 34%, var(--white));
  --surface: color-mix(in srgb, var(--white) 86%, transparent);
  --surface-solid: var(--white);
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  --text: var(--ink);
  --text-soft: color-mix(in srgb, var(--ink) 68%, var(--white));
  --text-faint: color-mix(in srgb, var(--ink) 52%, var(--white));
  --accent: var(--sky);
  --accent-deep: color-mix(in srgb, var(--sky) 55%, var(--ink));
  --neg: var(--tongue);
  --shadow-soft: color-mix(in srgb, var(--accent-deep) 34%, transparent);
  --shadow-ink: color-mix(in srgb, var(--ink) 22%, transparent);
  --spot: color-mix(in srgb, var(--white) 70%, transparent);
  --skeleton-a: color-mix(in srgb, var(--ink) 7%, transparent);
  --skeleton-b: color-mix(in srgb, var(--ink) 14%, transparent);
  --flash-up: color-mix(in srgb, var(--sky) 60%, transparent);
  --flash-down: color-mix(in srgb, var(--tongue) 50%, transparent);
}