/* Kanutus / ONCUE design tokens — single source for the static site, the Next.js app and the desktop app.
   Same palette, type and radii as the ONCUE canvas (kanutus-voice/design/oncue-canvas/oncue.css).
   Plain CSS custom properties so static HTML can link this file directly; `styles.css` maps them into Tailwind v4.
   Dark is the default for Kanutus; add data-theme="light" (or .light) on <html> for the light theme. */

:root {
  /* type */
  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-sheet: 28px;
  --r-pill: 999px;

  /* spacing scale (4 px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* brand (same in both themes) */
  --accent: #76b900;
  --on-accent: #0b0b0c;
  --accent-2: #9be01f;
  --info: #5b8def;
  --warning: #ffb900;
  --teal: #1fb6a6;

  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* dark theme (default) */
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --ink: #f5f5f7;
  --ink-2: #d1d1d6;
  --muted: #a1a1a6;
  --subtle: #8e8e93;
  --line: #38383a;
  --line-strong: #48484a;
  --accent-ink: #9be01f;
  --accent-soft: #1f2e08;
  --danger: #ff6961;
  --danger-soft: #3a1513;
  --warning-ink: #ffcf5c;
  --warning-soft: #3a2a00;
  --info-ink: #8fb6ff;
  --info-soft: #0f1f3d;
  --control-off: #48484a;
  --nav-bg: rgba(28, 28, 30, 0.92);
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  color-scheme: dark;
}

:root[data-theme="light"],
.light {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #e8e8ed;
  --surface-3: #d1d1d6;
  --ink: #0b0b0c;
  --ink-2: #3a3a3c;
  --muted: #6e6e73;
  --subtle: #8e8e93;
  --line: #e6e6ea;
  --line-strong: #d1d1d6;
  --accent-ink: #3d6300;
  --accent-soft: #eef6df;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --warning-ink: #8a5a00;
  --warning-soft: #fff1d6;
  --info-ink: #2f5fc4;
  --info-soft: #e3eef9;
  --control-off: #d1d1d6;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --scrim: rgba(0, 0, 0, 0.28);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}