/* ============================================================
   See You Onchain — Color tokens
   Two-color brand: blue leads, orange answers. Everything sits
   on a deep navy starfield. Green/red are functional only.
   ============================================================ */
:root {
  /* --- Brand accents (bright) --- */
  --blue: #91b3f0;          /* Primary — calm lead accent, links, highlights */
  --orange: #f46d32;        /* Secondary — the warm spark, one per view */
  --green: #3dc47e;         /* Functional — up / gain / live / success */
  --red: #ef4444;           /* Functional — down / loss / error */
  --black: #111111;         /* Mark base / text on light */
  --white: #ffffff;         /* Primary text on dark */

  /* --- Navy field (surfaces & atmosphere, from live site) --- */
  --navy: #0a131f;          /* The base night */
  --horizon: #0e1c2b;       /* Lifted navy — top of the ellipse */
  --space: #060a11;         /* Deep space — outer field */
  --void: #040812;          /* The darkest cut */

  /* --- Accent supports for gradients --- */
  --signal: #7e98e0;        /* Muted blue for aurora radials */
  --blue-deep: #27396e;     /* Deep blue tile background */
  --clay: #a86650;          /* Muted warm for gradient stops */
  --ember: #cd7442;         /* The warm dawn edge */
  --ember-deep: #7a3d1c;    /* Deep ember tile background */

  /* --- Surfaces --- */
  --base: #0a131f;          /* Page base */
  --surface: #0f1a2a;       /* Card / panel surface */
  --surface-2: #13202f;     /* Raised surface, inputs */

  /* --- Ink (text on navy) --- */
  --ink: rgba(255, 255, 255, 1);       /* Primary text */
  --ink-2: rgba(214, 225, 244, 0.90); /* Secondary / body */
  --ink-3: rgba(168, 188, 228, 0.80); /* Muted / labels */

  /* --- Lines & fills --- */
  --line: rgba(150, 178, 235, 0.14);      /* Default border */
  --line-soft: rgba(150, 178, 235, 0.07); /* Hairline divider */
  --card: rgba(120, 150, 220, 0.05);      /* Subtle fill / chip */

  /* --- Semantic aliases --- */
  --text-strong: var(--ink);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-link: var(--blue);
  --surface-page: var(--base);
  --surface-card: var(--surface);
  --surface-raised: var(--surface-2);
  --border-default: var(--line);
  --border-hairline: var(--line-soft);
  --fill-subtle: var(--card);
  --accent-primary: var(--blue);
  --accent-secondary: var(--orange);
  --status-up: var(--green);
  --status-down: var(--red);

  /* --- Gradients & atmosphere --- */
  --grad-brand: linear-gradient(100deg, var(--blue), var(--orange));
  --grad-horizon: linear-gradient(180deg, #1b2d4c 0%, var(--navy) 52%, #2a1409 100%);
  --grad-navy-duo: linear-gradient(110deg, #2b3d62, var(--horizon) 56%, #34211a);
  --grad-sky: radial-gradient(ellipse at 70% 46%, var(--horizon) 0%, var(--navy) 52%, var(--space) 100%);
  --glow-ember: radial-gradient(circle at 13% 84%, rgba(205, 116, 66, 0.20), transparent 42%); /* @kind other */
  --glow-blue: radial-gradient(circle at 90% 14%, rgba(126, 152, 224, 0.15), transparent 46%); /* @kind other */
}