/*
  Design tokens — the app's palette, spacing scale and typography, all as
  CSS custom properties. Everything else in the app reads colors from here
  instead of hard-coding hex values, so the whole theme can be adjusted in
  one place.

  Colors follow a validated dark-mode data-visualization palette: dark
  surfaces with a blue/orange/aqua categorical set for series identity, and
  dedicated green/red tokens for gains/losses that are never reused for
  anything else (so "green always means up" everywhere in the app).
*/

:root {
  color-scheme: dark;

  /* Surfaces */
  --page-bg: #0d0d0d;
  --surface-1: #171716; /* cards, table */
  --surface-2: #1f1f1e; /* sidebar, elevated panels */
  --surface-hover: #262625;
  --chart-surface: #1a1a19;

  /* Ink */
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --border-hairline: rgba(255, 255, 255, 0.1);
  --border-hairline-strong: rgba(255, 255, 255, 0.16);

  /* Gridlines / axis */
  --gridline: #2c2c2a;
  --baseline: #383835;

  /* Categorical (broker identity) — fixed order, never cycled */
  --series-1: #3987e5; /* blue   → Flatex */
  --series-2: #d95926; /* orange → Bank Austria */
  --series-3: #199e70; /* aqua   → easybank */

  /* Chart line (single-series performance chart) */
  --chart-line: #3987e5;
  --chart-fill-top: rgba(57, 135, 229, 0.22);
  --chart-fill-bottom: rgba(57, 135, 229, 0);

  /* Delta / status — reserved, never reused for series */
  --delta-positive: #0ca30c;
  --delta-positive-bg: rgba(12, 163, 12, 0.14);
  --delta-negative: #e66767;
  --delta-negative-bg: rgba(230, 103, 103, 0.14);
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Typography */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.55);

  --sidebar-width: 240px;
  --topbar-height: 68px;
}