:root {
  --accent: #00d4aa;
  --accent-ink: #04140f;
  --danger: #f6465d;
  --warning: #f0b90b;

  --bg: #0b0e11;
  --bg-elevated: #12161c;
  --bg-elevated-2: #1a1f27;
  --bg-hover: #202631;
  --border: #232933;
  --border-strong: #2e3644;

  --text: #eaecef;
  --text-secondary: #b7bdc6;
  --text-muted: #767e8c;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.55);

  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

  --header-h: 56px;
  --account-bar-h: 44px;
  --chart-body-h: max(600px, 65vh);
  /* JS toggles this between 64px/220px on sidebar expand/collapse; the
     watchlist drawer reads the same variable so its left offset never
     drifts out of sync with the sidebar's actual width. */
  --sidebar-w: 64px;
}

:root[data-theme='light'] {
  --bg: #f5f6f8;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #eef0f3;
  --bg-hover: #e4e7ec;
  --border: #dfe3e8;
  --border-strong: #c8cdd6;

  --text: #14181f;
  --text-secondary: #4b5563;
  --text-muted: #8a92a1;

  --accent-ink: #ffffff;
}