/* Design tokens. Names map 1:1 to Figma variables (collection/name). Dark only. */
:root {
  color-scheme: dark;

  /* color (sampled from the CChat app) */
  --color-bg: #0b0e14;
  --color-bg-soft: #10141a;
  --color-surface: #151a21;
  --color-border: #222832;
  --color-border-strong: #2c3440;
  --color-text: #e6e9ef;
  --color-text-muted: #8b94a3;
  --color-accent: #4c8df6;
  --color-focus: #4c8df6;
  --color-btn: #4c8df6;
  --color-btn-hover: #6aa0f8;
  --color-on-btn: #0b0e14;
  --color-todo: #8b94a3;
  --color-progress: #e0a84a;
  --color-done: #3fb27a;

  /* color / app surfaces */
  --color-sidebar: #121720;
  --color-active: #1a2029;
  --color-input: #0d1117;
  --color-new-chat: #3f74cc;
  --color-avatar: #213558;
  --color-user-bubble: #15345d;
  --color-user-border: #24508f;
  --color-tool-bg: #142a33;
  --color-tool-border: #234155;
  --color-tool-dot: #3eb8a5;
  --font-app: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 6px;

  /* spacing (8px grid) */
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-9: 72px;

  /* type */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-hero: clamp(2rem, 4vw, 3rem);
}