/* ═══════════════════════════════════════════════════════════════════════════
   ALPHA SIGNAL PRO — V18 DESIGN TOKENS  ·  "SOVEREIGN"
   One single source of truth. Replaces tokens.css / tokens-v14 / -v15 / -v16.
   Dark default: deep indigo obsidian. Light: daylight porcelain.
   Type: Space Grotesk (display) · Inter (body) · IBM Plex Mono (data).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette ─────────────────────────────────────────────────── */
  --brand-900: #0A0E1F;
  --brand-800: #101736;
  --brand-700: #182149;
  --brand-600: #2A3568;
  --brand-500: #4C5FD5;
  --brand-400: #7C8CFF;
  --brand-300: #9DACFF;
  --brand-200: #C3CBFF;
  --brand-100: #E4E8FF;
  --gold-500: #F5B841;
  --jade-500: #2EDD93;
  --coral-500: #FF6B81;
  --sky-500: #6FB1FF;

  /* ── Typography ────────────────────────────────────────────────────── */
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-ui: var(--sans);
  --font-mono: var(--mono);
  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
  --tracking-tight: -0.02em; --tracking-wide: 0.02em; --tracking-widest: 0.08em;
  --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --text-hero: clamp(2.4rem, 5.4vw, 4.25rem);
  --text-2xl: clamp(1.55rem, 2.6vw, 2.1rem);
  --text-xl: clamp(1.3rem, 2vw, 1.55rem);
  --text-lg: 1.0625rem;
  --text-base: 0.9375rem;
  --text-md: 0.875rem;
  --text-sm: 0.8125rem;
  --text-xs: 0.75rem;

  /* ── Spacing / radius / motion ─────────────────────────────────────── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-full: 999px;
  --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(2, 4, 12, 0.32);
  --shadow-2: 0 4px 14px rgba(2, 4, 12, 0.34);
  --shadow-3: 0 14px 44px rgba(2, 4, 12, 0.46);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(2, 4, 12, 0.30);
  --shadow-cta: 0 8px 26px rgba(124, 140, 255, 0.30);

  /* ── Layout metrics ────────────────────────────────────────────────── */
  --rail-w: 236px; --rail-w-open: 236px; --topbar-h: 58px;
  --header-height: 58px; --content-max: 1440px;
  --row-h: 44px; --cell-pad-x: 12px; --seam: 10px;
  --sidebar-width: 236px; --sidebar-collapsed: 68px;

  /* ── Z-index ladder ──────────────────────────────────────────────────
     V18.0.2 — corrected ladder. Ascending (low → high):
       rail < topbar < bottomnav < sticky/dropdown < overlay(scrim)
       < drawer < modal-bg < modal < toast < palette
     The load-bearing relation is DRAWER > OVERLAY: the mobile off-canvas
     drawer must paint ABOVE its own scrim, or the scrim intercepts every
     tap and the menu becomes unclickable (the V18.0.1 field bug — the
     legacy bridge below re-defined --z-drawer:400 UNDER --z-overlay:600).
     This base block and the legacy-bridge block MUST stay in sync. */
  --z-rail: 400; --z-topbar: 300; --z-sticky: 500; --z-overlay: 600;
  --z-drawer: 650; --z-dropdown: 500; --z-bottomnav: 450; --z-toast: 850;
  --z-modal-bg: 700; --z-modal: 710; --z-palette: 900;

  /* ── Status semantics (used by dots, chips, banners) ───────────────── */
  --st-ok: var(--up); --st-warn: var(--warn); --st-bad: var(--down);
  --st-info: var(--info); --st-idle: var(--dimmer);
  --focus-ring: 0 0 0 3px rgba(124, 140, 255, 0.35);
}

/* Light theme — daylight porcelain */
[data-theme="light"] {
  --shadow-1: 0 1px 2px rgba(16, 22, 44, 0.06);
  --shadow-2: 0 4px 14px rgba(16, 22, 44, 0.08);
  --shadow-3: 0 14px 44px rgba(16, 22, 44, 0.14);
  --shadow-card: 0 1px 2px rgba(16, 22, 44, 0.05), 0 10px 30px rgba(16, 22, 44, 0.07);
  --shadow-cta: 0 8px 26px rgba(76, 95, 213, 0.22);
  --focus-ring: 0 0 0 3px rgba(76, 95, 213, 0.30);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY BRIDGE — every variable historically defined by tokens.css /
   tokens-v14.css / tokens-v15.css / tokens-v16.css, merged (newest wins)
   and re-pointed to the V18 palette above. Guarantees zero breakage for
   every legacy stylesheet still consuming these names.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #05070F;
  --bg-2: #090D1A;
  --panel: #0D1322;
  --panel-2: #131B30;
  --panel-3: #1A2440;
  --panel-hover: #18213A;
  --line: #1E2946;
  --line-2: #2C3A5E;
  --overlay: rgba(2, 4, 12, 0.78);
  --ink: #ECF0FC;
  --ink-strong: #FFFFFF;
  --ink-2: #C3CCE6;
  --dim: #8B95B8;
  --dimmer: #5F6A8C;
  --disabled: #3B4666;
  --accent: #7C8CFF;
  --accent-2: #4C5FD5;
  --accent-3: #9DACFF;
  --accent-soft: rgba(124, 140, 255, 0.13);
  --accent-glow: transparent;
  --aurora-a: #1F5EFF;
  --aurora-b: #0EA5A5;
  --aurora-c: #4D7DFF;
  --up: #2EDD93;
  --up-soft: rgba(46, 221, 147, 0.12);
  --down: #FF6B81;
  --down-soft: rgba(255, 107, 129, 0.12);
  --pos-buy: var(--up);
  --pos-sell: var(--down);
  --pnl-positive: var(--up);
  --pnl-negative: var(--down);
  --blue: #6FB1FF;
  --blue-soft: rgba(111, 177, 255, 0.12);
  --cyan: #53D6D0;
  --amber: #F5B841;
  --amber-soft: rgba(245, 184, 65, 0.12);
  --red: #FF6B81;
  --red-soft: rgba(255, 107, 129, 0.12);
  --purple: #B48CF2;
  --gold: #F5B841;
  --teal: #2BB8B0;
  --teal-2: #23948E;
  --teal-soft: rgba(43, 184, 176, 0.12);
  --color-primary: var(--accent);
  --color-primary-dark: var(--accent-2);
  --color-primary-light: var(--accent-3);
  --color-primary-soft: var(--accent-soft);
  --color-secondary: var(--blue);
  --color-secondary-soft: var(--blue-soft);
  --color-success: var(--up);
  --color-success-soft: var(--up-soft);
  --color-warning: var(--amber);
  --color-warning-soft: var(--amber-soft);
  --color-danger: var(--red);
  --color-danger-soft: var(--red-soft);
  --color-info: var(--blue);
  --color-info-soft: var(--blue-soft);
  --brand-primary: #0C1B33;
  --brand-primary-dark: #060F22;
  --brand-primary-light: #1F5EFF;
  --brand-accent: #1F5EFF;
  --brand-accent-dark: #1646C8;
  --brand-secondary: #0E8E8E;
  --brand-gradient: linear-gradient(135deg, #0C1B33 0%, #16386E 100%);
  --brand-gradient-accent: linear-gradient(135deg, #1F5EFF 0%, #1646C8 100%);
  --brand-glow: none;
  --accent-glow-color: transparent;
  --seam: linear-gradient(0deg, #3F3F3F, #3F3F3F);
  --seam-wide: linear-gradient(0deg, var(--line), var(--line));
  --aurora-ribbon: linear-gradient(0deg, #3F3F3F, #3F3F3F);
  --aurora-ribbon-wide: linear-gradient(0deg, var(--line), var(--line));
  --glass-blur: 0px;
  --glass-bg: rgba(16, 27, 46, 0.96);
  --glass-bg-strong: #FFFFFF;
  --glass-brd: var(--line);
  --glass-highlight: transparent;
  --shadow-sm: 0 1px 2px rgba(12, 25, 48, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-1: 0 1px 2px rgba(3, 5, 16, 0.40);
  --shadow-2: 0 6px 24px rgba(3, 5, 16, 0.50);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow: none;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line);
  --shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-cta: 0 2px 8px rgba(31, 94, 255, 0.28);
  --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow-card: none;
  --grad-1: linear-gradient(135deg, #0C1B33, #16386E);
  --grad-2: linear-gradient(135deg, #1F5EFF, #1646C8);
  --grad-3: linear-gradient(135deg, #0E8E8E, #0B7A7A);
  --grad-glow: none;
  --grad-surface: none;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 13.5px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.1em;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --r-sm: 6px;
  --r: var(--radius);
  --r-md: 12px;
  --r-lg: var(--radius-lg);
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: var(--radius-pill);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 10px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 140ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  /* V18.0.2 — z ladder corrections (this bridge block out-cascades the base
     :root above, so its values are the EFFECTIVE ones; both blocks must stay
     in sync — see the ladder comment in the base block):
       · --z-modal 600 → 710: a modal must sit above its own backdrop (700)
       · --z-toast 700 → 850: toasts must stay visible above open modals
     (--z-sidebar stays 400 on purpose: premium.css's legacy mobile sidebar
     uses --z-overlay for the sidebar and --z-sidebar for its decorative
     ::before scrim, so sidebar-token must remain below overlay-token.) */
  --z-dropdown: 500;
  --z-sticky: 500;
  --z-header: 200;
  --z-sidebar: 400;
  --z-overlay: 600;
  --z-modal-bg: 700;
  --z-modal: 710;
  --z-toast: 850;
  --header-height: var(--topbar-h);
  --sidebar-width: 252px;
  --sidebar-collapsed: 64px;
  --content-max: 1440px;
  --content-max-width: 1440px;
  --border-color: var(--line);
  --border-color-2: var(--line-2);
  --border-default: var(--line);
  --border-strong: var(--line-2);
  --glass-border: var(--line);
  --shadow-3: 0 10px 30px rgba(0, 0, 0, 0.5);
  --font-ui: var(--sans);
  --font-mono: var(--mono);
  --font-display: var(--sans);
  --space-7: 32px;
  --radius-xs: 3px;
  --radius-pill: 999px;
  --rail-w: 252px;
  --rail-w-open: 252px;
  --topbar-h: 52px;
  --sidebar-w: 252px;
  --sidebar-w-open: 252px;
  --row-h: 40px;
  --row-h-lg: 48px;
  --cell-pad-x: 12px;
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --z-topbar: 300;
  --z-rail: 400;
  --z-palette: 900;
  --mdn-canvas: #0B1220;
  --mdn-chrome: var(--bg-deep);
  --mdn-surface: #101B2E;
  --mdn-surface-2: #0D1626;
  --mdn-well: #0E1728;
  --mdn-hairline: #1D2C46;
  --mdn-hairline-2: #2B3D5C;
  --mdn-ink: #EDF2FA;
  --mdn-ink-2: #8A99B5;
  --mdn-ink-3: #64748E;
  --mdn-accent: var(--accent);
  --mdn-accent-soft: var(--accent-soft);
  --mdn-buy: #2ABE6D;
  --mdn-sell: #F0516A;
  --mdn-focus-ring: 0 0 0 3px rgba(31, 94, 255, 0.22);
  --mdn-chrome-2: #10152A;
  --mdn-chrome-line: var(--line);
  --mdn-chrome-ink: var(--ink);
  --mdn-chrome-dim: var(--dim);
  --mdn-chrome-active: var(--panel-3);
  --radius-2xl: 12px;
  --r-xs: 3px;
  --z-bottomnav: 450;
  --bg-deep: #030509;
  --elevated: #1D2543;
  --line-soft: rgba(140, 158, 220, 0.10);
  --ink-inverse: #0B0E1D;
  --accent-strong: #6B7BF2;
  --accent-hover: #8D9BFF;
  --accent-pressed: #6070E8;
  --accent-line: rgba(124, 140, 255, 0.34);
  --accent-ink: #070A18;
  --gold-strong: #E3A729;
  --gold-soft: rgba(245, 184, 65, 0.12);
  --gold-ink: #221804;
  --warn: #F5B841;
  --warn-soft: rgba(245, 184, 65, 0.12);
  --info: #6FB1FF;
  --info-soft: rgba(111, 177, 255, 0.12);
  --purple-soft: rgba(192, 132, 252, 0.14);
  --cyan-soft: rgba(79, 209, 197, 0.13);
  --sig-buy: var(--up);
  --sig-sell: var(--down);
  --exec-ok: var(--up);
  --exec-rej: var(--down);
  --exec-wait: var(--warn);
  --pill-ok-bg: rgba(52, 211, 153, 0.13);
  --pill-ok-ink: #6EE7B7;
  --pill-bad-bg: rgba(251, 113, 133, 0.13);
  --pill-bad-ink: #FDA4AF;
  --pill-warn-bg: rgba(245, 184, 65, 0.13);
  --pill-warn-ink: #FCD34D;
  --pill-info-bg: rgba(96, 165, 250, 0.13);
  --pill-info-ink: #93C5FD;
  --pill-idle-bg: rgba(150, 160, 194, 0.12);
  --pill-idle-ink: #A5AECB;
  --text-hero: clamp(30px, 4.2vw, 52px);
  --z-drop: 300;
  /* V18.0.2 FIX — was 400, UNDER --z-overlay: 600. The mobile drawer
     (#mdnRail when .mdn-app.side-open) painted below #mdnSideScrim, so the
     scrim intercepted every tap: the menu showed but was unclickable on
     phones (field report V18.0.1). 650 puts the drawer above the scrim
     (600) and the bottom nav (450). */
  --z-drawer: 650;
  --t-med: 240ms;
  --pub-bg: #F6F7FB;
  --pub-panel: #FFFFFF;
  --pub-line: #E5E7F2;
  --pub-line-2: #D3D7E7;
  --pub-ink: #141830;
  --pub-ink-2: #3A405E;
  --pub-dim: #6B7191;
  --pub-accent: #4C5FD5;
  --pub-accent-deep: #37479F;
  --pub-accent-soft: rgba(76, 95, 213, 0.09);
  --pub-up: #0C9B78;
  --pub-down: #D64560;
  --pub-code-bg: #EFF1F9;
  --pub-gold: #B07E14;
  --pub-gold-deep: #8F6510;
  --pub-gold-soft: rgba(176, 126, 20, 0.10);
  --mdn-chrome-ink-2: var(--dim);
  --canvas: var(--bg);
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --border: var(--line);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-muted: var(--dim);
  --fg-faint: var(--dimmer);
  --green: var(--up);
  --focus-ring: 0 0 0 3px rgba(124, 140, 255, 0.30);
}

[data-theme="light"] {
  --bg: #F6F7FB;
  --bg-2: #EFF1F8;
  --panel: #FFFFFF;
  --panel-2: #F4F6FB;
  --panel-3: #EBEEF7;
  --panel-hover: #EEF1FA;
  --line: #DFE3F0;
  --line-2: #C9D0E6;
  --overlay: rgba(16, 22, 44, 0.42);
  --ink: #141A2E;
  --ink-strong: #0A0F1E;
  --ink-2: #3E4763;
  --dim: #5C6785;
  --dimmer: #8B94AF;
  --disabled: #C4CADB;
  --accent: #4C5FD5;
  --accent-2: #3A4BB8;
  --accent-3: #6E7FE8;
  --accent-soft: rgba(76, 95, 213, 0.09);
  --up: #0E9F6E;
  --up-soft: rgba(14, 159, 110, 0.10);
  --down: #E5484D;
  --down-soft: rgba(229, 72, 77, 0.10);
  --glass-bg: #FFFFFF;
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-brd: rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-1: 0 1px 2px rgba(24, 28, 49, 0.06);
  --shadow-2: 0 6px 24px rgba(24, 28, 49, 0.10);
  --shadow-glow: 0 0 0 1px rgba(37, 99, 235, 0.22), 0 4px 20px rgba(37, 99, 235, 0.10);
  --shadow-cta: 0 4px 14px rgba(123, 181, 46, 0.2);
  --grad-1: linear-gradient(135deg, #2563EB 0%, #64C8FF 100%);
  --brand-gradient: linear-gradient(135deg, #2563EB 0%, #64C8FF 100%);
  --blue: #175CD3;
  --blue-soft: rgba(23, 92, 211, 0.08);
  --amber: #B45309;
  --amber-soft: rgba(180, 83, 9, 0.10);
  --red: #E5484D;
  --red-soft: rgba(229, 72, 77, 0.10);
  --glass-border: #E5E7EB;
  --shadow-3: 0 12px 34px rgba(17, 24, 39, 0.14);
  --mdn-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent);
  --bg-deep: #E9ECF5;
  --elevated: #FFFFFF;
  --line-soft: rgba(76, 95, 213, 0.10);
  --ink-inverse: #F6F7FC;
  --accent-strong: #3B4DBB;
  --accent-hover: #3A4BB8;
  --accent-pressed: #3B4DBB;
  --accent-line: rgba(76, 95, 213, 0.32);
  --accent-ink: #FFFFFF;
  --gold: #B45309;
  --gold-strong: #8F6510;
  --gold-soft: rgba(180, 83, 9, 0.10);
  --gold-ink: #FFFFFF;
  --warn: #B45309;
  --warn-soft: rgba(180, 83, 9, 0.10);
  --info: #175CD3;
  --info-soft: rgba(23, 92, 211, 0.08);
  --purple: #6D4FD4;
  --purple-soft: rgba(109, 79, 212, 0.10);
  --cyan: #158A9B;
  --cyan-soft: rgba(21, 138, 155, 0.10);
  --sig-buy: var(--up);
  --sig-sell: var(--down);
  --exec-ok: var(--up);
  --exec-rej: var(--down);
  --exec-wait: var(--warn);
  --pill-ok-bg: rgba(12, 155, 120, 0.12);
  --pill-ok-ink: #0A7D5F;
  --pill-bad-bg: rgba(214, 69, 96, 0.12);
  --pill-bad-ink: #B03549;
  --pill-warn-bg: rgba(154, 108, 13, 0.14);
  --pill-warn-ink: #7A560B;
  --pill-info-bg: rgba(42, 100, 159, 0.12);
  --pill-info-ink: #23517E;
  --pill-idle-bg: rgba(108, 115, 145, 0.12);
  --pill-idle-ink: #4A5069;
  --mdn-chrome-2: #F3F4FA;
  --mdn-chrome-dim: var(--dim);
  --mdn-chrome-active: var(--accent-soft);
  --mdn-accent: var(--accent);
  --mdn-accent-soft: var(--accent-soft);
  --focus-ring: 0 0 0 3px rgba(76, 95, 213, 0.22);
}