// ── Design Tokens ────────────────────────────────────────────────────────
// SCSS maps generate CSS custom properties. Organised by category so new
// tokens are easy to locate and add. All runtime theming uses var(--name).

// Background layers — darkest to lightest
$bg: (
  base:       #0f1117,   // body, nav background
  surface:    #0d1117,   // section cards, sidebar
  elevated:   #111827,   // section headers, table headers
  card:       #1e293b,   // input bg, tags, summary cards, ctx cards
  card-hover: #131c2b,   // table row hover
  row-alt:    #1a2233,   // portfolio table row border
);

// Borders
$borders: (
  border:        #1e293b,  // primary — cards, sections, inputs
  border-subtle: #161f2e,  // table row separators
  border-input:  #2d3f55,  // form input borders
);

// Text — brightest to most muted
$text: (
  text-primary:   #f1f5f9,  // headings, tickers, card values
  text-secondary: #e2e8f0,  // body text, input values
  text-muted:     #94a3b8,  // secondary text, reasons
  text-dim:       #64748b,  // labels, table headers, muted values
  text-dimmer:    #475569,  // very muted — timestamps, hints
  text-faint:     #334155,  // count badge text, column headers
);

// Blue accent  ('blue' is a CSS color name — must be quoted)
$blues: (
  'blue':         #3b82f6,  // focus ring, progress bar, bar-fill
  'blue-dark':    #2563eb,  // primary button bg
  'blue-darker':  #1d4ed8,  // primary button hover
  'blue-muted':   #60a5fa,  // active tab text, edit icon hover
  'blue-surface': #1e3a5f,  // active tab bg, mode tab bg
  'blue-deep':    #0f2240,  // analyze button hover bg
  'blue-badge':   #0d1e30,  // sidebar header background
);

// Signal / semantic colors  (green/yellow/red/orange are CSS color names — must be quoted)
$signals: (
  'green':      #4ade80,
  'green-bg':   #14532d33,
  'yellow':     #facc15,
  'yellow-bg':  #71350033,
  'red':        #f87171,
  'red-bg':     #450a0a33,
  'red-deep':   #450a0a55,  // error banner bg
  'red-border': #7f1d1d,    // error banner border
  'orange':     #fb923c,
);

// ── Emit all maps as CSS custom properties ───────────────────────────────
:root {
  @each $name, $val in $bg      { --bg-#{$name}: #{$val}; }
  @each $name, $val in $borders { --#{$name}: #{$val};    }
  @each $name, $val in $text    { --#{$name}: #{$val};    }
  @each $name, $val in $blues   { --#{$name}: #{$val};    }
  @each $name, $val in $signals { --#{$name}: #{$val};    }

  // Typography
  --fs-2xs: 9px;
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-md:  13px;
  --fs-lg:  15px;
  --fs-xl:  18px;
  --fs-2xl: 20px;

  // Border radius
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-pill: 20px;

  // Spacing
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  14px;
  --space-xl:  18px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  // Transitions
  --transition: 0.15s;
}