:root {
  --font-body: "Inter", system-ui, sans-serif;
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem;  --radius-xl: 1rem; --radius-full: 9999px;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

:root, [data-theme="light"] {
  --color-bg:           #f4f4f5;
  --color-surface:      #ffffff;
  --color-border:       #e4e4e7;
  --color-border-focus: #1a1a1a;
  --color-text:         #18181b;
  --color-text-muted:   #71717a;
  --color-text-faint:   #a1a1aa;
  --color-error:        #dc2626;
  --color-error-bg:     #fef2f2;
  --color-success:      #16a34a;
  --color-success-bg:   #f0fdf4;
  --color-blue:         #3b82f6;
  --color-primary:      #1a1a1a;
}

[data-theme="dark"] {
  --color-bg:           #09090b;
  --color-surface:      #18181b;
  --color-border:       #27272a;
  --color-border-focus: #d4d4d8;
  --color-text:         #fafafa;
  --color-text-muted:   #a1a1aa;
  --color-text-faint:   #52525b;
  --color-error:        #f87171;
  --color-error-bg:     #1f1217;
  --color-success:      #4ade80;
  --color-success-bg:   #0d1f12;
  --color-blue:         #60a5fa;
  --color-primary:      #fafafa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#09090b; --color-surface:#18181b; --color-border:#27272a;
    --color-border-focus:#d4d4d8; --color-text:#fafafa;
    --color-text-muted:#a1a1aa; --color-text-faint:#52525b;
    --color-error:#f87171; --color-error-bg:#1f1217;
    --color-success:#4ade80; --color-success-bg:#0d1f12;
    --color-blue:#60a5fa; --color-primary:#fafafa;
  }
}