/*
 * Every colour, radius and duration on the page.
 *
 * Nothing else in this crate may write a raw colour; a test fails the build if
 * one appears outside this file. That rule survives the move off the previous
 * stack, where the same guard existed — it is the reason the palette can be
 * retuned in one place and the reason the gold below could be replaced wholesale
 * without hunting through components.
 */

:root {
  /* Surfaces. Four steps, and they are steps: each one is the ground for the
     thing above it, so a card on a panel on the page is always legible as
     three layers rather than one flat field. */
  --bg: #08080a;
  --surface: #121214;
  --surface-2: #1a1a1e;
  --surface-3: #232328;

  --border: #232327;
  --border-soft: #1b1b1f;
  --border-hover: #2e2e34;

  --text: #ffffff;
  --text-2: #a1a1a8;
  --text-3: #6b6b72;
  --text-4: #46464c;

  /* Gold, sampled off the platform's own mark rather than picked: the mark
     runs a ramp from #2b1d09 through #9a6b1e to a near-lemon highlight, and
     these are three points off it. */
  --gold: #f9bf42;
  --gold-hi: #feeb80;
  --gold-lo: #b6832d;
  --gold-dim: rgba(249, 191, 66, 0.14);
  --gold-line: rgba(249, 191, 66, 0.38);
  --gold-glow: rgba(254, 222, 104, 0.26);
  /* The page's ambient light. Wide and weak — it exists to give every surface
     a direction, not to be seen as a shape. */
  --ambient: rgba(249, 191, 66, 0.11);
  --ambient-cool: rgba(120, 150, 190, 0.07);
  /* The light that crosses the mark on hover. Near-white, because gold reads
     as gold by reflecting something brighter than itself. */
  --sheen: rgba(255, 255, 255, 0.72);
  /* Not a colour that is ever seen. A mask stop needs something fully opaque
     to mean "keep this part", and this is that. It lives here so the rule
     that colour is declared in one file survives contact with masks. */
  --mask-keep: #000000;
  --on-gold: #1a1405;

  --up: #3fd68f;
  --up-soft: rgba(63, 214, 143, 0.12);
  --down: #f0565c;

  --mark-tile: #f2f2f4;
  --mark-tile-edge: #cfcfd6;
  /* One hairline shared by twenty-one different brand grounds. Without a
     common edge a rail of coloured tiles reads as confetti. */
  --mark-edge: rgba(255, 255, 255, 0.14);
  --pill-active: #26262b;
  --scrim: rgba(8, 8, 10, 0.72);

  /*
   * Radius carries rank.
   *
   * Everything used to be 12px, which is why nothing looked more important
   * than anything else. Now the size of a corner says what kind of object it
   * is: the one panel that matters is roundest, a card is middling, a control
   * is tight. It reads before any of the text does.
   */
  --r-panel: 18px;
  --r-card: 10px;
  --r-field: 8px;
  --r-pill: 6px;

  /* Motion answers an action; it never plays on its own. */
  --t-fast: 120ms;
  --t-slow: 220ms;

  --font-sans: "General Sans", Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}