/* ============================================
   Design Tokens — Dark Theme for Charting
   ============================================ */

:root {
  /* Surface colors */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #1c2128;
  --bg-surface: #21262d;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  /* Border colors */
  --border-primary: #30363d;
  --border-secondary: #21262d;
  --border-accent: #388bfd;

  /* Text colors */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-tertiary: #6e7681;
  --text-link: #58a6ff;
  --text-on-accent: #ffffff;

  /* Accent / Brand colors */
  --accent-blue: #388bfd;
  --accent-green: #2ea043;
  --accent-red: #f85149;
  --accent-orange: #d29922;
  --accent-purple: #a371f7;

  /* Group colors (used for chart markers and badges) */
  --group-energy: #e67e22;
  --group-tech: #3498db;
  --group-biotech: #2ecc71;
  --group-finance: #9b59b6;
  --group-industrial: #e74c3c;

  /* Chart colors */
  --chart-bg: #0d1117;
  --chart-grid: #1c2128;
  --chart-text: #8b949e;
  --chart-candle-up: #2ea043;
  --chart-candle-down: #f85149;
  --chart-crosshair: #58a6ff;
  --chart-volume: rgba(56, 139, 253, 0.3);

  /* Spacing scale */
  --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;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Layout */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 0px;
  --header-height: 48px;
  --card-min-width: 280px;
  --card-max-width: 400px;

  /* Z-index layers */
  --z-sidebar: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-lightbox: 400;
  --z-tooltip: 500;
}