/* ============================================================================
   AIQ+ — 24sos.in  ·  Design Tokens
   Faithful port of the live platform's theme.ts / index.css design system.
   Dark-native trading-terminal aesthetic.
   ============================================================================ */

:root {
  /* ---- Surface hierarchy (RGB channels for opacity composition) ---- */
  --bg-0: 2 6 23;       /* #020617 slate-950 — page background          */
  --bg-1: 15 23 42;     /* #0f172a slate-900 — card / panel             */
  --bg-2: 30 41 59;     /* #1e293b slate-800 — elevated / header        */
  --bg-3: 51 65 85;     /* #334155 slate-700 — highest                  */

  /* ---- Borders / lines ---- */
  --line:   30 41 59;   /* slate-800 */
  --line-2: 51 65 85;   /* slate-700 */

  /* ---- Text ---- */
  --tx-0: 241 245 249;  /* slate-100 — primary   */
  --tx-1: 203 213 225;  /* slate-300 — body      */
  --tx-2: 148 163 184;  /* slate-400 — secondary */
  --tx-3: 100 116 139;  /* slate-500 — muted     */

  /* ---- Semantic / data ---- */
  --positive: 52 211 153;   /* #34d399 emerald-400 */
  --negative: 251 113 133;  /* #fb7185 rose-400    */
  --warning:  251 191 36;   /* #fbbf24 amber-400   */
  --info:     34 211 238;   /* #22d3ee cyan-400    */
  --accent:   99 102 241;   /* #6366f1 indigo-500  */
  --accent-2: 139 92 246;   /* #8b5cf6 violet-500  */
  --muted:    100 116 139;  /* #64748b slate-500   */

  /* ---- Module accents (per-section identity, from theme.ts) ---- */
  --m-amber:   251 191 36;
  --m-rose:    251 113 133;
  --m-emerald: 52 211 153;
  --m-sky:     56 189 248;
  --m-teal:    45 212 191;
  --m-cyan:    34 211 238;
  --m-indigo:  129 140 248;
  --m-violet:  167 139 250;
  --m-lime:    163 230 53;
  --m-fuchsia: 232 121 249;

  /* ---- Tick flash ---- */
  --tick-up:   110 231 183;
  --tick-down: 251 113 133;

  /* ---- Typography ---- */
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num:  'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ---- Radii ---- */
  --r-card:  10px;
  --r-btn:   7px;
  --r-badge: 5px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.02);
  --shadow-elevated: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --glow-accent: 0 0 0 1px rgba(99,102,241,.35), 0 8px 30px rgba(99,102,241,.18);

  /* ---- Layout metrics ---- */
  --hdr-h: 64px;
  --max-w: 1320px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(139,92,246,.08), transparent 55%),
    rgb(var(--bg-0));
  color: rgb(var(--tx-1));
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; color: rgb(var(--tx-0)); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
.mono, .num { font-family: var(--font-num); font-feature-settings: 'tnum','cv11'; font-variant-numeric: tabular-nums; }

/* ---- Color utilities ---- */
.pos { color: rgb(var(--positive)); }
.neg { color: rgb(var(--negative)); }
.warn { color: rgb(var(--warning)); }
.info { color: rgb(var(--info)); }
.acc { color: rgb(var(--accent)); }
.tx0 { color: rgb(var(--tx-0)); }
.tx2 { color: rgb(var(--tx-2)); }
.tx3 { color: rgb(var(--tx-3)); }

/* ---- Scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--bg-3)) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgb(var(--bg-3)); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgb(71 85 105); }

/* ---- Accessibility ---- */
:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }