/* tokens.css — theme custom properties ONLY. Dark is the default canvas. */
@font-face {
  font-family: 'Archivo Var';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ground */
  --bg: #050607;
  --bg-elev: #0b0e11;
  --surface: #10141a;
  --line: #1e242c;
  --line-strong: #2c3540;

  /* ink */
  --ink: #f2f4f7;
  --ink-dim: #c7cdd4;
  --muted: #8b95a1;

  /* brand */
  --accent: #3987e5;
  --accent-hot: #5ba0f0;
  --accent-ink: #ffffff;         /* text on accent */
  --glow: rgba(57, 135, 229, 0.35);
  --glow-soft: rgba(57, 135, 229, 0.12);

  /* semantic */
  --good: #35c27a;
  --miss: #e5484d;               /* the missed-call red */
  --warn: #e5a13a;

  /* chat bubbles */
  --bubble-user: #1c2833;
  --bubble-bot: #12233a;
  --bubble-bot-line: #24405f;

  /* type */
  --font-display: 'Archivo Var', 'Archivo', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;

  /* shape + rhythm */
  --radius: 16px;
  --radius-sm: 10px;
  --pill: 999px;
  --section-pad: clamp(5.5rem, 12vw, 10rem);
  --wrap: 1180px;
  --wrap-narrow: 820px;

  /* elevation */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 50px -18px rgba(0,0,0,0.65);
  --shadow-pop: 0 30px 80px -20px rgba(0,0,0,0.75), 0 0 60px -12px var(--glow-soft);

  --nav-h: 64px;
}

:root[data-theme="light"] {
  --bg: #fafbfd;
  --bg-elev: #f1f4f8;
  --surface: #ffffff;
  --line: #e4e8ee;
  --line-strong: #cdd5de;

  --ink: #0b0d10;
  --ink-dim: #2e3640;
  --muted: #5d6874;

  --accent: #2569c4;
  --accent-hot: #1d5aad;
  --accent-ink: #ffffff;
  --glow: rgba(37, 105, 196, 0.22);
  --glow-soft: rgba(37, 105, 196, 0.08);

  --good: #178a54;
  --miss: #d33438;
  --warn: #b97a17;

  --bubble-user: #eef1f5;
  --bubble-bot: #e3edfa;
  --bubble-bot-line: #c3d8f2;

  --shadow-card: 0 1px 2px rgba(11,13,16,0.05), 0 16px 40px -20px rgba(11,13,16,0.18);
  --shadow-pop: 0 30px 80px -24px rgba(11,13,16,0.25), 0 0 50px -12px var(--glow-soft);
}