/*
 * Design tokens (docs/DESIGN.md, docs/FRONTEND.md "Tokens, not values"). The only place colours, type, radii, shadows
 * and motion are defined; components use these names. A shadcn/ui-style zinc system, dark by default, with one
 * periwinkle accent for her presence (the orb, focus, live work) and status colours that never carry meaning alone.
 */
:root {
  color-scheme: dark;

  /* surfaces (zinc) */
  --background: #09090b;
  --background-2: #0c0c0f;
  --card: #0f0f12;
  --card-hover: #141418;
  --popover: #111114;
  --raised: #18181b;
  --overlay: rgb(0 0 0 / 0.6);
  --border: #27272a;
  --border-subtle: #1c1c20;
  --border-strong: #3f3f46;
  --input: #27272a;

  /* text */
  --foreground: #fafafa;
  --foreground-2: #d4d4d8;
  --muted-foreground: #a1a1aa;
  --faint-foreground: #8b8b94;

  /* actions */
  --primary: #fafafa;
  --primary-foreground: #09090b;
  --primary-hover: #e4e4e7;
  --secondary: #1c1c20;
  --secondary-hover: #27272a;
  --ghost-hover: #18181b;

  /* her accent (periwinkle) and its glow */
  --accent: #a5a6ff;
  --accent-strong: #8183f4;
  --accent-soft: #c7c8ff;
  --accent-bg: #14143a;
  --accent-border: #3730a3;
  --accent-glow: rgb(129 131 244 / 0.35);
  --accent-glow-soft: rgb(129 131 244 / 0.14);
  --ring: #a5a6ff;

  /* status */
  --success: #4ade80;
  --success-bg: #0b1f13;
  --success-border: #14532d;
  --warning: #fbbf24;
  --warning-bg: #171106;
  --warning-border: #4a360c;
  --danger: #f87171;
  --danger-bg: #1f0b0b;
  --danger-border: #5c1a1a;
  --destructive: #dc2626;
  --destructive-hover: #b91c1c;
  --destructive-foreground: #ffffff;
  --destructive-glow: rgb(220 38 38 / 0.35);
  --info: #60a5fa;

  /* diff and transcript speakers */
  --diff-add: #4ade80;
  --diff-del: #f87171;
  --speaker-owner: #4ade80;
  --speaker-other: #e9d8b4;

  /* type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 30px;

  /* shape and space */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --sidebar-width: 256px;
  --touch: 44px;

  /* depth */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.55), 0 0 0 1px var(--border);
  --glow: 0 0 0 1px var(--accent-border), 0 0 24px var(--accent-glow-soft);
  --grid-line: rgb(255 255 255 / 0.025);

  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 120ms;
  --normal: 200ms;
}

body.driving {
  --background: #000000;
}