/* GENERATED FILE -- do not edit by hand.
 * Source of truth: CodeTracer Design System (Figma -> DTCG JSON).
 * Regenerate:  just design-tokens   (or python3 scripts/generate-design-tokens.py)
 * DS checkout: codetracer-design-system
 * Facade map:  scripts/design-tokens.map.json  (the only curated artifact)
 *
 * Colour-mode axis: :root = Light (preserves the light WebUI);
 *                   [data-theme="dark"] overrides colours that differ.
 * Density axis:      :root = Compact;
 *                   [data-density="comfortable"|"spacious"] override spacing/radii roles.
 */


:root {
  --cci-color-primary: #a5b4fc;
  --cci-color-secondary: #818cf8;
  --cci-color-background: #d2ccc1;
  --cci-color-surface: #dbd6cc;
  --cci-color-text-main: #272522;
  --cci-color-text-muted: #353430;
  --cci-color-border: #aca494;
  --cci-color-danger: #dc2626;
  --cci-color-danger-bg: #fee2e2;
  --cci-color-success: #16a34a;
  --cci-font-family: "Space Grotesk", system-ui, sans-serif;
  --cci-font-mono: "Space Mono", ui-monospace, monospace;
  --cci-text-xs: 0.75rem;
  --cci-text-sm: 0.875rem;
  --cci-text-base: 1rem;
  --cci-text-lg: 1.25rem;
  --cci-text-xl: 1.5rem;
  --cci-space-1: 0.25rem;
  --cci-space-2: 0.5rem;
  --cci-space-3: 0.75rem;
  --cci-space-4: 1rem;
  --cci-space-6: 1.5rem;
  --cci-space-8: 2rem;
  --cci-radius-sm: 0.5rem;
  --cci-radius-md: 0.75rem;
  --cci-radius-lg: 1rem;
  --cci-radius-pill: 9999px;
  --cci-breakpoint-sm: 640px;
  --cci-breakpoint-md: 768px;
  --cci-breakpoint-lg: 1024px;
  --cci-breakpoint-xl: 1280px;
  --cci-pad-panel: 20px;
  --cci-pad-card: 16px;
  --cci-pad-control-x: 10px;
  --cci-pad-control-y: 6px;
  --cci-gap-card: 6px;
  --cci-gap-control: 6px;
  --cci-radius-card: 8px;
  --cci-radius-control: 6px;
  --cci-text: #272522;
  --cci-text-muted: #353430;
  --cci-border: #aca494;
  --cci-paper: #dbd6cc;
  --cci-hover: #dddddd;
  --cci-select: #dbeafe;
  --cci-focus: #2563eb;
  --cci-chip: #dddddd;
  --cci-link: #2563eb;
  --cci-code-bg: #f3f3f3;
  --cci-syntax-plain: #1d1c1a;
  --cci-syntax-keyword: #a3144d;
  --cci-syntax-function: #0d6d05;
  --cci-syntax-string: #705c00;
  --cci-syntax-number: #6047c6;
  --cci-syntax-type: #00648f;
  --cci-syntax-parameter: #99450b;
  --cci-syntax-comment: #6c664b;
  --cci-syntax-error: #b4231a;
  --cci-syntax-punctuation: #353430;
  --cci-chart-1: #0891b2;
  --cci-chart-2: #7c3aed;
  --cci-chart-3: #16a34a;
  --cci-chart-4: #ea580c;
}

/* Dark colour-mode from the DS `mapped` Dark modes. */
[data-theme="dark"] {
  --cci-color-primary: #4f46e5;
  --cci-color-background: #1b1b1b;
  --cci-color-surface: #262626;
  --cci-color-text-main: #f3f3f3;
  --cci-color-text-muted: #b4b4b4;
  --cci-color-border: #565656;
  --cci-color-success: #4ade80;
  --cci-text: #f3f3f3;
  --cci-text-muted: #b4b4b4;
  --cci-border: #565656;
  --cci-paper: #262626;
  --cci-syntax-plain: #f3f3f3;
  --cci-syntax-keyword: #ff79c6;
  --cci-syntax-function: #50fa7b;
  --cci-syntax-string: #f1fa8c;
  --cci-syntax-number: #bd93f9;
  --cci-syntax-type: #8be9fd;
  --cci-syntax-parameter: #ffb86c;
  --cci-syntax-comment: #6272a4;
  --cci-syntax-error: #ff5555;
  --cci-syntax-punctuation: #c8c8c8;
  --cci-chart-1: #22d3ee;
  --cci-chart-2: #a78bfa;
  --cci-chart-3: #4ade80;
  --cci-chart-4: #fb923c;
}

/* Comfortable density from the DS `space` collection. */
[data-density="comfortable"] {
  --cci-pad-panel: 28px;
  --cci-pad-card: 22px;
  --cci-pad-control-x: 14px;
  --cci-pad-control-y: 8px;
  --cci-gap-card: 10px;
  --cci-gap-control: 8px;
  --cci-radius-card: 12px;
  --cci-radius-control: 8px;
}

/* Spacious density from the DS `space` collection. */
[data-density="spacious"] {
  --cci-pad-panel: 40px;
  --cci-pad-card: 32px;
  --cci-pad-control-x: 20px;
  --cci-pad-control-y: 12px;
  --cci-gap-card: 16px;
  --cci-gap-control: 10px;
  --cci-radius-card: 16px;
  --cci-radius-control: 12px;
}