/* ═══════════════════════════════════════
   1. TOKENS & RESET
═══════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg-base:    #080b0f;
  --bg-surface: #0d1117;
  --bg-raised:  #131920;
  --bg-hover:   #1a2230;

  /* Borders */
  --border:       #1e2d3d;
  --border-light: #2d4057;

  /* Text */
  --text-primary:   #f0f6fc;
  --text-secondary: #a0adb8;
  --text-muted:     #526070;

  /* Semantic colours */
  --accent:       #4d94ff;
  --accent-dim:   #4d94ff18;
  --positive:     #4ac26b;
  --positive-dim: #4ac26b18;
  --negative:     #ff6b6b;
  --negative-dim: #ff6b6b18;
  --warning:      #e3a726;
  --warning-dim:  #e3a72618;
  --purple:       #a371f7;
  --purple-dim:   #a371f718;

  /* Typography */
  --font-ui:   'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;  /* Pills, coverage badges */

  /* Marketing / landing page brand palette */
  --brand:        #10B981;
  --brand-hover:  #34D399;
  --brand-dim:    rgba(16, 185, 129, 0.08);
  --brand-border: rgba(16, 185, 129, 0.2);

  /* Marketing page background & text (slightly warmer than terminal) */
  --bg-marketing:      #05080c;
  --text-marketing:    #c9d1d9;
  --text-marketing-2:  #94a3b8;
  --text-marketing-3:  #64748b;
  --text-marketing-hi: #f8fafc;

  /* Accent interactive states */
  --accent-hover: #2d7fff;

  /* Transitions */
  --transition-base:   all 0.15s ease;
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-reveal: opacity 0.6s ease, transform 0.6s ease;

  /* Marketing container max width */
  --container-max: 1200px;

  /* Chart canvas height budget — ECharts requires explicit px heights to render */
  --chart-h-lg:  350px;   /* Sankey, primary full charts */
  --chart-h-md:  280px;   /* Secondary charts, compact desktop */
  --chart-h-sm:  240px;   /* Mobile / very small viewports */

  /* Scrollbar — consistent thin scrollbars across all feeds */
  --scrollbar-w:     3px;
  --scrollbar-w-lg:  4px;
  --scrollbar-thumb: var(--border-light);
  --scrollbar-track: transparent;
}

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