/* ===================================================== design tokens
 *
 * Taken from the reference's own stylesheet rather than eyeballed, so the
 * surfaces, text and borders match exactly. The palette names are theirs —
 * jet, charcoal, ash and so on — because a named scale is easier to reason
 * about than a pile of hex values.
 */

:root {
  /* Surfaces. The page is nearly black; cards sit 6% lighter, which is a
     smaller step than it sounds and is what stops the UI looking striped. */
  --palette-jet: 0 0% 4%;
  --palette-codeblock: 0 0% 7%;
  --palette-charcoal: 0 0% 10%;
  --palette-ink: 213 11% 16%;
  --palette-umbra: 221 12% 14%;
  --palette-steel: 216 4% 22%;
  --palette-ash: 216 5% 19%;
  --palette-evenfall: 214 16.1% 28%;

  /* Text. Not pure white: a slightly cool off-white reads softer against a
     near-black ground and is what the reference actually uses. */
  --palette-dove: 222 19% 86%;
  --palette-pewter: 213 12% 70%;
  --palette-fog: 216 4% 51%;
  --palette-ivory: 40 18% 97%;

  /* Accents */
  --palette-dawn: 37 100% 76%;
  --palette-sunset: 22 100% 51.6%;
  --palette-twilight: 255 92% 76%;
  --palette-breeze: 214 48.9% 73.9%;
  --palette-dusk: 263 70% 50.4%;

  --background: var(--palette-jet);
  --card: var(--palette-charcoal);
  --foreground: var(--palette-dove);
  --border: var(--palette-umbra);
  --muted: var(--palette-fog);

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* The older sheet uses these names throughout; mapping them here means the
     whole site picks up the reference palette without touching every rule. */
  --bg: hsl(var(--background));
  --raised: hsl(var(--card));
  --line: hsl(var(--border));
  --line-soft: hsl(var(--border) / 0.6);
  --text: hsl(var(--foreground));
  --dim: hsl(var(--palette-pewter));
  --faint: hsl(var(--muted));
  --green: hsl(var(--palette-ivory));
  --r: var(--radius-xl);
}

html, body { background: hsl(var(--background)); color: hsl(var(--foreground)); }

/* Typography.
 *
 * The reference uses Chirp, which is X's proprietary face and not licensed
 * for use here. Inter is the closest widely available substitute — same
 * grotesque skeleton and similar metrics — with the system stack behind it so
 * nothing depends on a network fetch.
 */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html, body {
  font-family: var(--font-sans);
  /* Tabular numerals keep money columns from jittering as values update. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}