:root {
  --spoolr-color-background: #f2f3f0;
  --spoolr-color-foreground: #111111;
  --spoolr-color-card: #ffffff;
  --spoolr-color-popover: #ffffff;
  --spoolr-color-popover-foreground: #111111;
  --spoolr-color-muted: #f2f3f0;
  --spoolr-color-muted-foreground: #666666;
  --spoolr-color-border: #cbccc9;
  --spoolr-color-input: #cbccc9;
  --spoolr-color-primary: #00C86B;
  --spoolr-color-primary-foreground: #0c0c0c;
  --spoolr-color-primary-tint-subtle: #00C86B0A;
  --spoolr-color-primary-tint-soft: #00C86B0D;
  --spoolr-color-primary-tint-medium: #00C86B12;
  --spoolr-color-accent-foreground: #111111;
  --spoolr-color-secondary: #e7e8e5;
  --spoolr-color-secondary-foreground: #111111;
  --spoolr-color-destructive: #d93c15;
  --spoolr-color-ring: #666666;
  --spoolr-radius-none: 0px;
  --spoolr-radius-m: 16px;
  --spoolr-radius-pill: 999px;
  --spoolr-shadow-outline-button: 0 1px 1.75px rgba(0, 0, 0, 0.05);
  --spoolr-shadow-tooltip: 0 2px 3.5px rgba(0, 0, 0, 0.06);
  --spoolr-font-primary: "JetBrains Mono", monospace;
  --spoolr-font-secondary: "JetBrains Mono", monospace;
  --spoolr-font-display: "Space Grotesk", sans-serif;
  /* Geist — the redesign typeface (sans for headings/body, mono for data/labels) */
  --spoolr-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --spoolr-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Status tokens */
  --spoolr-color-status-success-bg: #dfe6e1;
  --spoolr-color-status-success-fg: #004d1a;
  --spoolr-color-status-warning-bg: #e9e3d8;
  --spoolr-color-status-warning-fg: #804200;
  --spoolr-color-status-error-bg: #e5dcda;
  --spoolr-color-status-error-fg: #8c1c00;
  --spoolr-color-status-info-bg: #dfe6e1;
  --spoolr-color-status-info-fg: #004d1a;

  /* Sidebar tokens */
  --spoolr-color-sidebar-bg: #e7e8e5;
  --spoolr-color-sidebar-fg: #666666;
  --spoolr-color-sidebar-border: #cbccc9;
  --spoolr-color-sidebar-accent: #cbccc9;
  --spoolr-color-sidebar-accent-fg: #18181b;
}

[data-theme="dark"],
.dark {
  --spoolr-color-background: #0c0c0c;
  --spoolr-color-foreground: #ffffff;
  --spoolr-color-card: #0a0a0a;
  --spoolr-color-popover: #0a0a0a;
  --spoolr-color-popover-foreground: #ffffff;
  --spoolr-color-muted: #141414;
  --spoolr-color-muted-foreground: #8a8a8a;
  --spoolr-color-border: #2f2f2f;
  --spoolr-color-input: #2f2f2f;
  --spoolr-color-primary: #00ff88;
  --spoolr-color-primary-foreground: #0c0c0c;
  --spoolr-color-primary-tint-subtle: #00ff880A;
  --spoolr-color-primary-tint-soft: #00ff880D;
  --spoolr-color-primary-tint-medium: #00ff8812;
  --spoolr-color-accent-foreground: #ffffff;
  --spoolr-color-secondary: #141414;
  --spoolr-color-secondary-foreground: #ffffff;
  --spoolr-color-destructive: #ff5c33;
  --spoolr-color-ring: #666666;

  /* Status tokens - dark */
  --spoolr-color-status-success-bg: #222924;
  --spoolr-color-status-success-fg: #b6ffce;
  --spoolr-color-status-warning-bg: #291c0f;
  --spoolr-color-status-warning-fg: #ff8400;
  --spoolr-color-status-error-bg: #24100b;
  --spoolr-color-status-error-fg: #ff5c33;
  --spoolr-color-status-info-bg: #0e1a14;
  --spoolr-color-status-info-fg: #7bffd0;

  /* Sidebar tokens - dark */
  --spoolr-color-sidebar-bg: #18181b;
  --spoolr-color-sidebar-fg: #fafafa;
  --spoolr-color-sidebar-border: rgba(255, 255, 255, 0.1);
  --spoolr-color-sidebar-accent: #2a2a30;
  --spoolr-color-sidebar-accent-fg: #fafafa;
}
/* === Appearance palettes (generated; mirrors prototype lighten math) === */
/* Accent applies in both themes; surfaces only in dark mode. */
[data-palette="neon"] {
  --spoolr-color-primary: #22d67a;
  --spoolr-color-ring: #22d67a;
  --spoolr-color-primary-tint-subtle: #22d67a0A;
  --spoolr-color-primary-tint-soft: #22d67a0D;
  --spoolr-color-primary-tint-medium: #22d67a12;
}
[data-theme="dark"][data-palette="neon"], .dark[data-palette="neon"] {
  --spoolr-color-background: #0a0b0d;
  --spoolr-color-card: #101115;
  --spoolr-color-popover: #101115;
  --spoolr-color-muted: #16171b;
  --spoolr-color-secondary: #16171b;
  --spoolr-color-border: #242529;
  --spoolr-color-input: #242529;
  --spoolr-color-sidebar-bg: #101115;
  --spoolr-color-sidebar-border: #242529;
  --spoolr-color-sidebar-accent: #1d1e22;
}
[data-palette="solar"] {
  --spoolr-color-primary: #ff7a45;
  --spoolr-color-ring: #ff7a45;
  --spoolr-color-primary-tint-subtle: #ff7a450A;
  --spoolr-color-primary-tint-soft: #ff7a450D;
  --spoolr-color-primary-tint-medium: #ff7a4512;
}
[data-theme="dark"][data-palette="solar"], .dark[data-palette="solar"] {
  --spoolr-color-background: #0d0a08;
  --spoolr-color-card: #161210;
  --spoolr-color-popover: #161210;
  --spoolr-color-muted: #1c1816;
  --spoolr-color-secondary: #1c1816;
  --spoolr-color-border: #2a2624;
  --spoolr-color-input: #2a2624;
  --spoolr-color-sidebar-bg: #161210;
  --spoolr-color-sidebar-border: #2a2624;
  --spoolr-color-sidebar-accent: #231f1d;
}
[data-palette="electric"] {
  --spoolr-color-primary: #5b9dff;
  --spoolr-color-ring: #5b9dff;
  --spoolr-color-primary-tint-subtle: #5b9dff0A;
  --spoolr-color-primary-tint-soft: #5b9dff0D;
  --spoolr-color-primary-tint-medium: #5b9dff12;
}
[data-theme="dark"][data-palette="electric"], .dark[data-palette="electric"] {
  --spoolr-color-background: #0a0c12;
  --spoolr-color-card: #10131a;
  --spoolr-color-popover: #10131a;
  --spoolr-color-muted: #161920;
  --spoolr-color-secondary: #161920;
  --spoolr-color-border: #24272e;
  --spoolr-color-input: #24272e;
  --spoolr-color-sidebar-bg: #10131a;
  --spoolr-color-sidebar-border: #24272e;
  --spoolr-color-sidebar-accent: #1d2027;
}
[data-palette="plasma"] {
  --spoolr-color-primary: #c372f5;
  --spoolr-color-ring: #c372f5;
  --spoolr-color-primary-tint-subtle: #c372f50A;
  --spoolr-color-primary-tint-soft: #c372f50D;
  --spoolr-color-primary-tint-medium: #c372f512;
}
[data-theme="dark"][data-palette="plasma"], .dark[data-palette="plasma"] {
  --spoolr-color-background: #0c0a12;
  --spoolr-color-card: #13101a;
  --spoolr-color-popover: #13101a;
  --spoolr-color-muted: #191620;
  --spoolr-color-secondary: #191620;
  --spoolr-color-border: #27242e;
  --spoolr-color-input: #27242e;
  --spoolr-color-sidebar-bg: #13101a;
  --spoolr-color-sidebar-border: #27242e;
  --spoolr-color-sidebar-accent: #201d27;
}
[data-palette="sunshine"] {
  --spoolr-color-primary: #f5d24c;
  --spoolr-color-ring: #f5d24c;
  --spoolr-color-primary-tint-subtle: #f5d24c0A;
  --spoolr-color-primary-tint-soft: #f5d24c0D;
  --spoolr-color-primary-tint-medium: #f5d24c12;
}
[data-theme="dark"][data-palette="sunshine"], .dark[data-palette="sunshine"] {
  --spoolr-color-background: #0e0c08;
  --spoolr-color-card: #171410;
  --spoolr-color-popover: #171410;
  --spoolr-color-muted: #1d1a16;
  --spoolr-color-secondary: #1d1a16;
  --spoolr-color-border: #2b2824;
  --spoolr-color-input: #2b2824;
  --spoolr-color-sidebar-bg: #171410;
  --spoolr-color-sidebar-border: #2b2824;
  --spoolr-color-sidebar-accent: #24211d;
}
[data-palette="mono"] {
  --spoolr-color-primary: #e8e9ee;
  --spoolr-color-ring: #e8e9ee;
  --spoolr-color-primary-tint-subtle: #e8e9ee0A;
  --spoolr-color-primary-tint-soft: #e8e9ee0D;
  --spoolr-color-primary-tint-medium: #e8e9ee12;
}
[data-theme="dark"][data-palette="mono"], .dark[data-palette="mono"] {
  --spoolr-color-background: #0b0b0d;
  --spoolr-color-card: #131316;
  --spoolr-color-popover: #131316;
  --spoolr-color-muted: #19191c;
  --spoolr-color-secondary: #19191c;
  --spoolr-color-border: #27272a;
  --spoolr-color-input: #27272a;
  --spoolr-color-sidebar-bg: #131316;
  --spoolr-color-sidebar-border: #27272a;
  --spoolr-color-sidebar-accent: #202023;
}

/* === Typography mode (Geist sans default; mono flips everything) === */
:root, [data-typography="sans"], [data-typography="mixed"] {
  --spoolr-font-primary: var(--spoolr-font-sans);
  --spoolr-font-secondary: var(--spoolr-font-sans);
  --spoolr-font-display: var(--spoolr-font-sans);
}
[data-typography="mono"] {
  --spoolr-font-primary: var(--spoolr-font-mono);
  --spoolr-font-secondary: var(--spoolr-font-mono);
  --spoolr-font-display: var(--spoolr-font-mono);
  --spoolr-font-sans: var(--spoolr-font-mono);
}

/* === Density (scales rem-based spacing + type from the root) === */
[data-density="compact"] { font-size: 87.5%; }
[data-density="normal"]  { font-size: 100%; }
[data-density="comfy"]   { font-size: 112.5%; }

/* === Appearance swatch previews (accent + surface + bg tri-color) === */
.appearance-swatch--neon { background: linear-gradient(135deg, #22d67a 0 40%, #101115 40% 70%, #0a0b0d 70% 100%); }
.appearance-swatch--solar { background: linear-gradient(135deg, #ff7a45 0 40%, #161210 40% 70%, #0d0a08 70% 100%); }
.appearance-swatch--electric { background: linear-gradient(135deg, #5b9dff 0 40%, #10131a 40% 70%, #0a0c12 70% 100%); }
.appearance-swatch--plasma { background: linear-gradient(135deg, #c372f5 0 40%, #13101a 40% 70%, #0c0a12 70% 100%); }
.appearance-swatch--sunshine { background: linear-gradient(135deg, #f5d24c 0 40%, #171410 40% 70%, #0e0c08 70% 100%); }
.appearance-swatch--mono { background: linear-gradient(135deg, #e8e9ee 0 40%, #131316 40% 70%, #0b0b0d 70% 100%); }