/* QuantX — design tokens (app-parity layer).
 *
 * One :root custom-property sheet shared by the post-login surfaces
 * (account.html, login.html) via css/portal.css. Mirrors the desktop
 * app's visual language: near-black terminal surfaces, hairline
 * borders, brand blue + the app's brighter accent blue, and the app
 * type ramp (Bricolage Grotesque display / Inter Tight body /
 * JetBrains Mono data).
 *
 * Fonts are loaded per-page with the site's existing Google Fonts
 * <link> mechanism (preconnect + css2 stylesheet) — this file only
 * declares the stacks, it does not @import anything.
 *
 * Naming is qx-prefixed so nothing here collides with the marketing
 * tokens in css/styles.css (--brand-blue etc.), which remain untouched.
 */

:root {
  /* ---- Brand ---- */
  --qx-blue: #3B82F6;            /* site brand blue */
  --qx-blue-bright: #4a8cff;     /* app accent — hovers, focus, glows */
  --qx-blue-press: #3a72d8;
  --qx-blue-tint: rgba(74, 140, 255, 0.12);
  --qx-blue-ring: rgba(74, 140, 255, 0.30);

  /* ---- Terminal surfaces (app-echo) ---- */
  --qx-bg: #060911;              /* page base — matches site --bg-base */
  --qx-bg-deep: #080c14;         /* sunken wells, key readouts */
  --qx-surface: #0c1220;         /* card body */
  --qx-surface-2: #111a2e;       /* nested rows inside cards */
  --qx-border: rgba(255, 255, 255, 0.06);   /* hairline 1px */
  --qx-border-strong: rgba(255, 255, 255, 0.12);

  /* ---- Ink ---- */
  --qx-ink: #f1f5f9;
  --qx-ink-dim: #cbd5e1;
  --qx-ink-mute: #94a3b8;

  /* ---- Status ---- */
  --qx-green: #10b981;
  --qx-red: #ef4444;
  --qx-amber: #f59e0b;

  /* ---- Tier palette (desktop sidebar badge colors) ---- */
  --qx-tier-founder: #fbbf24;    /* amber  ✦ */
  --qx-tier-analyst: #22d3ee;    /* cyan   ◆ */
  --qx-tier-prodigy: #e879f9;    /* fuchsia ✦ */
  --qx-tier-quant: #34d399;      /* emerald */
  --qx-tier-reversion: #4a8cff;  /* blue */
  --qx-tier-edge: #38bdf8;       /* sky */
  --qx-tier-desk: #94a3b8;       /* slate */
  --qx-tier-floor: #64748b;      /* slate-dim */

  /* ---- Radius ---- */
  --qx-radius-sm: 8px;
  --qx-radius: 12px;
  --qx-radius-lg: 18px;
  --qx-radius-pill: 999px;

  /* ---- Type ramp ---- */
  --qx-font-display: 'Bricolage Grotesque', 'Inter Tight', 'Inter', system-ui, sans-serif;
  --qx-font-body: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --qx-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}