/* tokens.css — the Wise-inspired design system (see DESIGN-wise.md) as CSS
   custom properties. Single source of truth for both the vanilla shell
   (index.html etc.) and the dashboard/ React island, which imports this file
   directly rather than duplicating any values. */

:root {
  /* ---- Color ---- */
  --color-primary: #9fe870;
  --color-on-primary: #0e0f0c;
  --color-primary-active: #cdffad;
  --color-primary-neutral: #c5edab;
  --color-primary-pale: #e2f6d5;

  --color-ink: #0e0f0c;
  --color-ink-deep: #163300;
  --color-body: #454745;
  --color-mute: #868685;

  --color-canvas: #ffffff;
  --color-canvas-soft: #e8ebe6;

  --color-positive: #2ead4b;
  --color-positive-deep: #054d28;
  --color-warning: #ffd11a;
  --color-warning-deep: #b86700;
  --color-warning-content: #4a3b1c;
  --color-negative: #d03238;
  --color-negative-deep: #a72027;
  --color-negative-darkest: #a7000d;
  --color-negative-bg: #320707;

  --color-accent-orange: #ffc091;
  --color-accent-cyan: #38c8ff;

  /* ---- Radius ----
     12px (--radius-md) is the canonical component radius per the Synth-BI
     hybrid design system (Synth-BI-Hybrid-Design.md) — Zapier's geometry,
     not Wise's 24px cards. --radius-lg/-xl are kept as aliases so existing
     selectors don't need touching, but both now resolve to 12px too. */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  /* ---- Spacing (4px base unit) ---- */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ---- Typography ----
     Wise Sans is proprietary — DESIGN-wise.md's documented substitute is
     Inter/Manrope at weight 900. Manrope listed first since it's the closer
     match for the display weight; falls through to Inter for everything
     else (DESIGN-wise.md's own two-face system). */
  --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* ---- "Synth" chart series palette (the default preview mode, §8a) ----
     Led by the brand lime and the forest ink, then the system's two
     tertiary accents (cyan, peach). Mirrors PALETTES.synth in
     shared/chart-engine.js; synth-sql's orange-led palette survives there
     as the "Classic" preset. Very light series colors get a darkened
     stroke for thin lines (chart-engine.js strokeFor). */
  --chart-series-1: #9fe870;
  --chart-series-2: #163300;
  --chart-series-3: #38c8ff;
  --chart-series-4: #ffc091;
  --chart-series-5: #2ead4b;
  --chart-series-6: #6b7a64;
  --chart-series-7: #c5edab;
  --chart-series-8: #054d28;
}