/* ── Design tokens ─────────────────────────────────────────────
 *
 * Shared CSS custom properties used across every HTML page. Loaded
 * before any inline <style> blocks so individual pages can override
 * specific tokens (e.g. --bg for the pure-black hero pages) without
 * having to redeclare the whole set.
 *
 * Cascade order matters: keep the <link rel="stylesheet" href="
 * /assets/tokens.css"> tag in <head> ABOVE the page's inline <style>.
 *
 * To add a new token, add it here. Avoid declaring page-specific
 * one-off colors as tokens; only promote a value when at least two
 * pages share it.
 * ─────────────────────────────────────────────────────────────── */
:root {
  /* Surface colors */
  --bg:               #0d0d14;
  --surface:          #111118;
  --surface2:         #1a1a28;
  --border:           #22222e;
  --border-bright:    #2e2e3e;

  /* Text */
  --text:             #f2f2f7;
  --text-dim:         #a0a0b8;
  --text-muted:       #5a5a72;

  /* Accent (primary brand purple) */
  --accent:           #7c6df0;
  --accent-bright:    #a78bfa;
  --accent-glow:      rgba(124, 109, 240, 0.22);
  --accent-ui:        #5b6af0;
  --accent-ui-glow:   rgba(91, 106, 240, 0.25);

  /* Status colors */
  --green:            #34d399;
  --green-dim:        rgba(52, 211, 153, 0.1);
  --amber:            #fbbf24;

  /* Type */
  --mono:             "JetBrains Mono", monospace;
  --sans:             "Bricolage Grotesque", sans-serif;
}
