/* ==========================================================================
   DESIGN TOKENS
   Change colours, fonts and spacing here. Everything else reads from these.
   ========================================================================== */

:root {
  /* Brand */
  --color-brand: #6a4c93;          /* purple, from the PDF */
  --color-brand-strong: #563c7c;   /* hover state */
  --color-brand-soft: #f2f1e8;     /* cream band backgrounds (Mistral cream-100) */
  --color-lilac: #b9a6e6;          /* dashed flow lines, accents */

  /* Backgrounds (taken from mistral.ai's light theme) */
  --color-bg: #fbfbf8;               /* page background */
  --color-surface: #ffffff;          /* cards, form fields */
  --color-surface-alt: #f5f4ef;      /* alternating section background */
  --color-surface-deep: #101013;     /* dark section background (demo) */
  --color-text-on-deep: #fafaf4;     /* text on dark sections (Mistral cream-50) */
  --color-text-on-deep-muted: #f2f1e8; /* secondary text on dark sections (cream-100) */

  /* Text (taken from mistral.ai's light theme) */
  --color-text: #18181b;             /* primary text (zinc-900) */
  --color-text-secondary: #27272a;   /* zinc-800 */
  --color-muted: #3f3f46;            /* tertiary text, captions and leads (zinc-700) */
  --color-border: #e4e3de;

  /* Node / tag tones used by the flow diagram and badges */
  --tone-blue: #2a9fd6;
  --tone-amber: #c98a12;
  --tone-green: #2fa84f;
  --tone-lilac: #6a4c93;

  /* Typography */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Consolas, "Courier New", monospace;   /* same as mistral.ai */

  /* Layout */
  --container-width: 1120px;
  --gutter: 16px;
  --section-space: 96px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(17, 17, 20, 0.04), 0 8px 24px rgba(17, 17, 20, 0.05);
}