/* Single home for colour literals: deep teal ground, pale steel, one cyan accent,
   mint for up and periwinkle for down. Nothing else in the project may carry a
   hex, rgb() or hsl() literal (the pixel mark in scripts/art.mjs excepted). */
:root {
  --bg: #00181c;
  --bg-deep: #011619;
  --bg-soft: #04252e;
  --panel: #093a48;
  --steel-deep: #1d383f;
  --steel: #2b5261;
  --steel-lift: #3d6775;
  --muted-dark: #518998;
  --muted: #6f9eae;
  --text-soft: #b5ddea;
  --text: #eff9fc;
  --cyan: #71c4d2;
  --cyan-bright: #99e1f0;
  --accent: #10bfde;
  --accent-deep: #0e8ba1;
  --up: #42f0cf;
  --down: #8180ff;

  /* derived, no new colours */
  --line: color-mix(in srgb, var(--cyan) 18%, transparent);
  --line-soft: color-mix(in srgb, var(--cyan) 9%, transparent);
  --line-strong: color-mix(in srgb, var(--cyan) 32%, transparent);
  --shade: color-mix(in srgb, var(--bg-deep) 72%, transparent);

  /* type */
  --sans: "DM Sans", system-ui, sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --pixel: "Pixelify Sans", "Space Grotesk", system-ui, sans-serif;

  /* motion: hover .16-.18s, entrance .55s, pulse 2s */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.16s;
  --t-base: 0.18s;
  --t-enter: 0.55s;
  --wrap: min(100% - 48px, 1180px);
  --tap: 44px;
}