/* =====================================================================
   DESIGN TOKENS: the one place every colour on the site is defined.
   The main site, the dashboard and the site builder all import this file, so a colour changed here changes
   everywhere. Don't type a colour (#hex) into any other stylesheet: use a variable from this list. If you
   need a new colour, add it here first. (Pure white and black may be typed as #fff / #000.)

   This file is edited in  static/tokens.css  (main site folder) and copied next to the dashboard's
   stylesheets with  python tools/sync_tokens.py . dashboard/tests/test_tokens.py fails if the copies differ.
   ===================================================================== */
:root {
  /* ---- Surfaces ---- */
  --bg: #0f1014;                 /* page background */
  --bg-deep: #0a0b0e;            /* code blocks, canvases: a little darker than the page */
  --surface: #16171d;            /* panels and cards */
  --surface-hover: #1a1c22;      /* a hovered panel or card */
  --secondary: #1c1e25;          /* secondary buttons, rows, chips, inputs on a panel */
  --secondary-hover: #262933;    /* the same, hovered */
  --field: var(--secondary);     /* the fill of inputs, dropdowns, colour and date pickers: the button grey, so fields sit on panels like buttons */
  --field-hover: var(--secondary-hover);

  /* ---- Lines ---- */
  --line: #1f2128;               /* divider lines (top bar, sidebar, sections) */
  --line-hover: #2c2f39;         /* the faint ring around a hovered field, tile or card */
  --line-strong: #3a3d48;        /* a stronger ring / mark */
  --border: rgba(255, 255, 255, 0.08);          /* outline around boxes (the dashboard turns this off) */
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Text ---- */
  --text: #f1f2f6;               /* main text */
  --text-soft: #d6d7df;          /* body text that sits a little below main */
  --muted: #9a9cab;              /* secondary text */
  --subtle: #6b6e7d;             /* placeholders, disabled text */

  /* ---- Brand ---- */
  --primary: #155dfc;            /* the brand blue */
  --primary-hover: #2a6bff;
  --primary-soft: rgba(21, 93, 252, 0.14);       /* selected / active background */
  --primary-text: #8fb2ff;       /* blue text on a dark background (active menu item, selected chip) */
  --primary-text-light: #bcd0ff; /* the same, a step lighter (checked chips, highlighted text) */
  --on-primary: #ffffff;         /* text on the brand blue */
  --on-secondary: var(--text);   /* text on --secondary */

  /* ---- Status ---- */
  --success: #4ade80;
  --success-text: #a8e6bf;       /* green text on a dark background */
  --success-soft: rgba(34, 197, 94, 0.14);
  --warning: #f5b544;
  --warning-soft: rgba(245, 181, 68, 0.14);
  --danger: #f2555a;
  --danger-hover: #e3454a;
  --danger-text: #ff9a9e;
  --danger-soft: rgba(242, 85, 90, 0.13);

  /* ---- Accents used by the AI assistant ---- */
  --accent-violet: #7c3aed;
  --accent-violet-light: #a78bfa;

  /* ---- Other companies' brand colours (platform names, provider dots). Not part of our palette. ---- */
  --brand-twitch: #bf94ff;
  --brand-kick: #53fc18;
  --brand-discord: #8c9eff;
  --brand-anthropic: #d97757;
  --brand-openai: #10a37f;

  /* ---- Scrollbars ---- */
  --scrollbar: #2b2e37;
  --scrollbar-hover: #3b3f4a;

  /* ---- Type, shape, depth, motion ---- */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-sm: 4px;
  --radius: 6px;                 /* the site's normal corner rounding */
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
  --ease: cubic-bezier(.22, 1, .36, 1);
}