/* Sonar tokens — "signal console" theme. Dark is the default; light is a full mirror. */
:root, :root[data-theme="dark"] {
  --bg: #04070c;
  --surface-0: #060a11;
  --surface-1: #0b121b;
  --surface-2: #101a26;
  --surface-3: #172433;
  --glass: rgba(11, 18, 27, .62);
  --glass-strong: rgba(11, 18, 27, .86);
  --border: rgba(140, 180, 215, .12);
  --border-strong: rgba(140, 180, 215, .26);
  --ink: #e8f0f7;
  --ink-muted: #8ea2b4;
  --ink-faint: #56697b;

  --brand: #2de2d0;
  --brand-rgb: 45, 226, 208;
  --brand-2: #8b6cff;
  --brand-2-rgb: 139, 108, 255;
  --on-brand: #02110f;
  --brand-soft: rgba(45, 226, 208, .12);
  --brand-ink: #9ff5ec;

  --ok: #34d399;       --ok-soft: rgba(52, 211, 153, .13);   --ok-ink: #a7f3d0;
  --danger: #ff5a7a;   --danger-rgb: 255, 90, 122;
  --danger-soft: rgba(255, 90, 122, .13); --danger-ink: #ffb3c1;
  --warn: #fbbf24;     --warn-soft: rgba(251, 191, 36, .13); --warn-ink: #fde68a;
  --info: #60a5fa;     --info-soft: rgba(96, 165, 250, .13); --info-ink: #bfdbfe;
  --violet: #a78bfa;   --violet-soft: rgba(167, 139, 250, .14); --violet-ink: #ddd6fe;
  --pink: #f472b6;     --pink-soft: rgba(244, 114, 182, .13); --pink-ink: #fbcfe8;
  --slate: #94a3b8;    --slate-soft: rgba(148, 163, 184, .12); --slate-ink: #cbd5e1;

  --focus: #2de2d0;
  --overlay: rgba(0, 0, 0, .6);
  --grid-line: rgba(120, 170, 210, .05);
  --glow-brand: 0 0 0 1px rgba(45, 226, 208, .35), 0 0 32px rgba(45, 226, 208, .25);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, .55);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef3f8;
  --surface-0: #f4f7fb;
  --surface-1: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e4ebf2;
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .92);
  --border: rgba(15, 40, 70, .1);
  --border-strong: rgba(15, 40, 70, .22);
  --ink: #0a1624;
  --ink-muted: #506276;
  --ink-faint: #8596a8;

  --brand: #0a9f93;
  --brand-rgb: 10, 159, 147;
  --brand-2: #6a47f5;
  --brand-2-rgb: 106, 71, 245;
  --on-brand: #ffffff;
  --brand-soft: rgba(10, 159, 147, .1);
  --brand-ink: #056e66;

  --ok: #0f9f6e;       --ok-soft: rgba(15, 159, 110, .1);   --ok-ink: #065f46;
  --danger: #e11d48;   --danger-rgb: 225, 29, 72;
  --danger-soft: rgba(225, 29, 72, .09); --danger-ink: #9f1239;
  --warn: #c27c00;     --warn-soft: rgba(217, 140, 0, .12); --warn-ink: #7c4a03;
  --info: #2563eb;     --info-soft: rgba(37, 99, 235, .09); --info-ink: #1e3a8a;
  --violet: #7c3aed;   --violet-soft: rgba(124, 58, 237, .09); --violet-ink: #5b21b6;
  --pink: #db2777;     --pink-soft: rgba(219, 39, 119, .09); --pink-ink: #9d174d;
  --slate: #64748b;    --slate-soft: rgba(100, 116, 139, .1); --slate-ink: #334155;

  --focus: #0a9f93;
  --overlay: rgba(10, 22, 36, .45);
  --grid-line: rgba(15, 40, 70, .05);
  --glow-brand: 0 0 0 1px rgba(10, 159, 147, .35), 0 8px 28px rgba(10, 159, 147, .18);
  --shadow-sm: 0 1px 2px rgba(15, 40, 70, .08);
  --shadow-md: 0 12px 36px rgba(15, 40, 70, .12);
  --shadow-lg: 0 30px 70px rgba(15, 40, 70, .16);
  color-scheme: light;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --font-sans: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}