/* The frozen palette, for the marketing and auth pages. Everything behind the login resolves
   against static/css/tokens.css instead.

   Nine --sand-* names are declared by the design system too, with different values, and the
   tier-2 aliases below resolve through them — so on a page carrying both palettes every
   semantic colour would follow whichever one won. Never link this file from a page that loads
   the design system.

   Two tiers. Tier 1 (--sand-*, --rust-*, ...) are primitives, named for what the colour IS.
   Step numbers follow the Radix Colors model — 1-2 background, 3-5 component background,
   6-8 borders, 9-10 solid fill, 11-12 text. The neutral is the exception: it has no brand-solid
   role, so its 9-12 carry the four text levels these pages use, the faintest at 4.6 to one on
   the lowest-contrast surface.

   Tier 2 is semantic, named for what the colour is FOR, and is the only tier a rule may
   reference; a rule reaching for --rust-9 directly is a defect. Treat the values as constants:
   design-system/src/tokens.test.ts is the only thing standing between a hand-edit and a
   contrast failure. */
:root {
  /* ---- Tier 1: primitives. What the colour IS. Components must never use these. ---- */

  --sand-1: light-dark(#f8f5ee, #191816);
  --sand-2: light-dark(#f3eee2, #1e1d1a);
  --sand-3: light-dark(#eee9de, #23211d);
  --sand-6: light-dark(#e1dbce, #302d27);
  --sand-7: light-dark(#dad4c6, #38352e);
  --sand-9: light-dark(#6f6b63, #8a857b);
  --sand-10: light-dark(#5c5952, #9f9a8f);
  --sand-11: light-dark(#3b3831, #bbb6ab);
  --sand-12: light-dark(#171615, #e5e2d9);

  --rust-2: light-dark(#ffe9e1, #2f150c);
  --rust-4: light-dark(#ffdcd0, #441301);
  --rust-9: light-dark(#9e3c12, #b87848);
  --rust-10: light-dark(#8e2f01, #dc7651);
  --rust-11: light-dark(#a34b2a, #d07351);

  --danger-9: light-dark(#c0392b, #d85f52);
  --danger-11: light-dark(#b33c2f, #e26756);

  --success-9: light-dark(#4a7c59, #6aad79);

  --warning-9: light-dark(#a15d08, #e9a030);
  --warning-11: light-dark(#935714, #be7e42);

  --info-11: light-dark(#5160af, #7688db);

  --plum-9: light-dark(#9877c2, #b39bd6);

  /* One step of elevation above the page background: pure white on light, a lifted surface on
     dark. No single ramp step gives both, which is why it carries no step number. */
  --sand-raised: light-dark(#ffffff, #1e1d1a);

  /* ---- Tier 2: semantic. What the colour is FOR. This is the layer components use. ---- */

  --bg: var(--sand-1);
  --bg-alt: var(--sand-2);
  --border-light: var(--sand-6);
  --border: var(--sand-7);
  --text-muted: var(--sand-9);
  --text-faint: var(--sand-10);
  --text-secondary: var(--sand-11);
  --text: var(--sand-12);
  --input-bg: var(--sand-raised);

  --accent: var(--rust-9);
  --accent-hover: var(--rust-10);
  --accent-light: var(--rust-2);
  /* Text on an --accent fill. White clears 6.75:1 on the light solid; on the dark solid it
     manages only 3.61:1, so the dark theme inverts to the page background instead (4.92:1). */
  --accent-contrast: light-dark(#ffffff, var(--sand-1));

  --danger: var(--danger-11);

  --font-inter: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-inter);
}

/* A de-styling reset, not a link colour: links inherit the surrounding text colour, and the page
   stylesheets opt individual ones back into accent and underlines. */
a {
  color: inherit;
  text-decoration: none;
}