/* ═══════════════════════════════════════════════════════
   TradeDesk — Design Tokens & Global Styles
   ═══════════════════════════════════════════════════════ */
:root {
  /* Layout */
  --bg: #0a0b0f;
  --panel: #101219;
  --card: #161923;
  --border: #1f2334;
  --border-hi: #2c3049;
  --grid: #171b2a;

  /* Text hierarchy */
  --text: #d0d4e2;
  --text-bright: #e8ebf4;
  --text-dim: #8a90ab;
  --text-muted: #5c6180;
  --text-faint: #6b7194;
  --text-soft: #b8bdd4;

  /* Accent palette */
  --green: #26d97f;
  --green-dim: rgba(38, 217, 127, .12);
  --red: #f0506e;
  --red-dim: rgba(240, 80, 110, .12);
  --blue: #4da6ff;
  --blue-dim: rgba(77, 166, 255, .12);
  --blue-hover: #3d96f0;
  --amber: #ffb833;
  --amber-dim: rgba(255, 184, 51, .12);
  --purple: #a78bfa;
  --purple-dim: rgba(167, 139, 250, .12);

  /* Extended opacity variants (theme-aware) */
  --green-subtle: rgba(38, 217, 127, .06);
  --green-med: rgba(38, 217, 127, .15);
  --green-strong: rgba(38, 217, 127, .18);
  --red-subtle: rgba(240, 80, 110, .06);
  --red-med: rgba(240, 80, 110, .15);
  --red-strong: rgba(240, 80, 110, .18);
  --blue-med: rgba(77, 166, 255, .15);
  --blue-strong: rgba(77, 166, 255, .22);
  --blue-focus: rgba(77, 166, 255, .3);
  --amber-light: rgba(255, 184, 51, .12);
  --purple-med: rgba(167, 139, 250, .15);

  /* Chart / tooltip (theme-aware) */
  --label-bg: rgba(19, 23, 34, .85);
  --chart-tooltip-bg: rgba(16, 18, 25, .96);
  --chart-tooltip-border: rgba(77, 166, 255, .25);

  /* Chrome */
  --toolbar-active: #1e2136;
  --toolbar-w: 52px;
  --topbar-h: 46px;
  --rsb-strip-w: 52px;
  --rsb-panel-w: 400px;

  /* ── Component Design Tokens ── */

  /* Border radius scale (use ONLY these 3) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Overlay / modal backdrop */
  --overlay-bg: rgba(0, 0, 0, .65);
  --overlay-blur: 4px;
  --overlay-shadow: 0 16px 48px rgba(0, 0, 0, .55);

  /* Transition */
  --ease: .15s ease;

  /* Hover layers */
  --hover-subtle: rgba(255, 255, 255, .05);
  --hover-medium: rgba(255, 255, 255, .08);

  /* Scrollbar (theme-aware) */
  --scrollbar-thumb: rgba(255, 255, 255, .35);
  --scrollbar-thumb-hover: rgba(255, 255, 255, .5);

  /* Surface layers — theme-aware opacity overlays
     On dark: white alpha. On light: black alpha (inverted via preset). */
  --surface-veil:            rgba(255, 255, 255, .02);
  --surface-raised:          rgba(255, 255, 255, .06);
  --surface-border:          rgba(255, 255, 255, .08);
  --surface-border-hi:       rgba(255, 255, 255, .12);
  --surface-border-strong:   rgba(255, 255, 255, .18);
  --divider-soft:            rgba(255, 255, 255, .04);

  /* Shadows (theme-aware) */
  --shadow-soft:    rgba(0, 0, 0, .15);
  --shadow-strong:  rgba(0, 0, 0, .35);

  /* Pill-tab active state (white pill) */
  --pill-active-bg: #fff;
  --pill-active-color: #111;

  /* Font stacks (Outfit = UI, JetBrains = data) */
  --font-ui: 'Outfit', sans-serif;
  --font-data: 'JetBrains Mono', monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
/* ═══════════════════════════════════════════════════════
   Scrollbar & Responsive
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ═══════════════════════════════════════════════════════
   Light theme — body shadow under cards/panels
   ═══════════════════════════════════════════════════════ */
:root[data-theme="light"] body {
  color: var(--text);
}