:root {
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', monospace;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

  /* Transitions */
  --t-fast: 120ms ease; --t-base: 200ms ease; --t-slow: 350ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,.2);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.3);
}

[data-theme="dark"] {
  --bg-base:    #0d0d0f;
  --bg-surface: #141417;
  --bg-raised:  #1c1c21;
  --bg-hover:   #22222a;
  --bg-active:  #2a2a35;

  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.14);

  --text-primary:   #f0f0f5;
  --text-secondary: #8888a0;
  --text-muted:     #555568;

  --accent:        #6c63ff;
  --accent-light:  rgba(108,99,255,.15);
  --accent-hover:  #7d75ff;

  --success:       #34d399;
  --success-light: rgba(52,211,153,.12);
  --warning:       #fbbf24;
  --warning-light: rgba(251,191,36,.12);
  --danger:        #f87171;
  --danger-light:  rgba(248,113,113,.12);
  --info:          #60a5fa;
  --info-light:    rgba(96,165,250,.12);

  --media-text:   #a78bfa;
  --media-image:  #34d399;
  --media-video:  #f87171;
  --media-audio:  #fbbf24;
  --media-file:   #60a5fa;

  --syntax-var:      #c792ea;
  --syntax-js:       #82aaff;
  --syntax-bracket:  #ffcb6b;
  --syntax-string:   #c3e88d;
}

[data-theme="light"] {
  --bg-base:    #f5f5f8;
  --bg-surface: #ffffff;
  --bg-raised:  #f0f0f5;
  --bg-hover:   #eaeaf0;
  --bg-active:  #e0e0ea;

  --border:        rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.14);

  --text-primary:   #111118;
  --text-secondary: #666680;
  --text-muted:     #aaaabc;

  --accent:        #5b52e8;
  --accent-light:  rgba(91,82,232,.1);
  --accent-hover:  #6c63ff;

  --success:       #059669;
  --success-light: rgba(5,150,105,.1);
  --warning:       #d97706;
  --warning-light: rgba(217,119,6,.1);
  --danger:        #dc2626;
  --danger-light:  rgba(220,38,38,.1);
  --info:          #2563eb;
  --info-light:    rgba(37,99,235,.1);

  --media-text:   #7c3aed;
  --media-image:  #059669;
  --media-video:  #dc2626;
  --media-audio:  #d97706;
  --media-file:   #2563eb;

  --syntax-var:      #7c3aed;
  --syntax-js:       #2563eb;
  --syntax-bracket:  #d97706;
  --syntax-string:   #059669;
}