/*
  Palette provenance. Every hex below is a real pixel read from the supplied assets.
  Method: k-means (farthest-point init, 25 iterations, sampled every 5th pixel), each
  centroid then snapped to the nearest real pixel; coordinates are x,y in the source file.
  Logo source is the opaque PNG, 2000x2000, colourtype 6, fully opaque (alpha bins: all in the top bin).
  Cover source is the 1500x500 banner JPEG in reference/.
  Script: tools/palette.mjs, output: tools/palette.json.
  Literals live in this file only. Everything else derives with color-mix or var().
*/
:root {
  --color-bg: #0f0e0c;          /* logo (0,0), 91.2% of pixels */
  --color-sunk: #0b0a08;        /* cover (25,0), 84.8% of cover pixels */
  --color-orange: #fd8e2f;      /* logo (975,435), 8.2% */
  --color-orange-dim: #af6523;  /* logo (610,985), antialias midtone */
  --color-cream: #efe0cb;       /* cover (415,140), headline ink */
  --color-muted: #928c7e;       /* cover (490,245), caption grey */

  --color-mint: var(--color-orange);
  --color-ink: var(--color-cream);
  --color-ink-2: color-mix(in srgb, var(--color-cream) 78%, var(--color-bg));
  --color-panel: color-mix(in srgb, var(--color-cream) 4%, var(--color-bg));
  --color-panel-2: color-mix(in srgb, var(--color-cream) 8%, var(--color-bg));
  --color-line: color-mix(in srgb, var(--color-cream) 14%, var(--color-bg));
  --color-up: var(--color-cream);
  --color-down: var(--color-orange-dim);
  --color-glow: color-mix(in srgb, var(--color-orange) 18%, transparent);
  --color-shade: color-mix(in srgb, var(--color-sunk) 90%, transparent);

  --font-display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pulse: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-panel: cubic-bezier(0.4, 0, 0.1, 1);
  --dur-ui: 150ms;
  --dur-panel: 450ms;
  --radius: 3px;
  --gutter: 32px;
  --header-h: 69px;
  --tap: 44px;
}
@media (max-width: 640px) { :root { --gutter: 16px; --header-h: 61px; } }