/* ============================================================
   DESIGN TOKENS — black & white glass aesthetic
   ============================================================ */
:root, [data-theme="light"] {
  --color-bg: #f5f5f3;
  --color-desktop: #eceae7;
  --color-surface: rgba(255,255,255,0.56);
  --color-surface-2: rgba(255,255,255,0.72);
  --color-surface-glass: rgba(255,255,255,0.18);
  --color-border: rgba(0,0,0,0.12);
  --color-divider: rgba(0,0,0,0.08);
  --color-taskbar: rgba(255,255,255,0.45);
  --color-text: #111111;
  --color-text-muted: #4f4f4f;
  --color-text-faint: #8b8b8b;
  --color-text-inverse: #fafafa;
  --color-accent: #111111;
  --color-accent-2: #ffffff;
  --color-accent-glow: rgba(255,255,255,0.18);
  --color-success: #2e2e2e;
  --color-warning: #4c4c4c;
  --color-error: #000000;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-window: 14px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-md: 0 12px 30px rgba(0,0,0,0.16);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.24);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.22);
  --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;
  --space-16:4rem; --space-20:5rem;
  --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);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}
[data-theme="dark"] {
  --color-bg: #080808;
  --color-desktop: #050505;
  --color-surface: rgba(17,17,17,0.54);
  --color-surface-2: rgba(24,24,24,0.74);
  --color-surface-glass: rgba(255,255,255,0.05);
  --color-border: rgba(255,255,255,0.10);
  --color-divider: rgba(255,255,255,0.06);
  --color-taskbar: rgba(10,10,10,0.58);
  --color-text: #f3f3f1;
  --color-text-muted: #b7b7b5;
  --color-text-faint: #767676;
  --color-text-inverse: #111111;
  --color-accent: #ffffff;
  --color-accent-2: #d6d6d6;
  --color-accent-glow: rgba(255,255,255,0.16);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.40);
  --shadow-md: 0 12px 30px rgba(0,0,0,0.56);
  --shadow-lg: 0 28px 80px rgba(0,0,0,0.78);
  --shadow-glass: 0 10px 45px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.08);
}