:root {
    /* Backgrounds - VSCode theme inspired */
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2d2d2d;
    --bg-card: rgba(101, 182, 173, 0.04);

    /* Text - warm beige */
    --text-primary: #EBDBB7;
    --text-secondary: #9d8d7a;
    --text-muted: #B09B93;

    /* Primary accent - VSCode teal */
    --accent: #65B6AD;
    --accent-hover: #72c4bb;
    --accent-glow: rgba(101, 182, 173, 0.18);
    --accent-light: rgba(101, 182, 173, 0.10);
    --accent-dark: #4a8b83;

    /* Supporting palette */
    --green: #65B6AD;
    --green-glow: rgba(101, 182, 173, 0.15);
    --purple: #4553A3;
    --purple-glow: rgba(69, 83, 163, 0.15);
    --orange: #FACCB5;
    --orange-glow: rgba(250, 204, 181, 0.15);

    /* Borders */
    --border: rgba(101, 182, 173, 0.18);
    --border-light: rgba(101, 182, 173, 0.09);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Crimson Text', 'Georgia', 'Times New Roman', serif;
    --font-mono: 'Courier New', 'Monaco', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;

    /* Spacing */
    --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;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 6px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-glow: 0 0 48px rgba(101, 182, 173, 0.22);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 280ms ease;
    --transition-slow: 500ms ease;

    /* Container */
    --container-max: 1280px;
    --container-padding: 1.5rem;

    /* Theme-switchable surfaces */
    --nav-scrolled-bg: rgba(15, 15, 15, 0.85);
    --mobile-menu-bg: rgba(15, 15, 15, 1);
    --dropdown-bg: rgba(15, 15, 15, 0.95);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --grid-line-color: rgba(255, 255, 255, 0.03);
}

/* Light Mode - Warm Cream */
[data-theme="light"] {
    --bg-primary: #F5F3F0;
    --bg-secondary: #EBE8E3;
    --bg-tertiary: #E0DCD5;
    --bg-card: rgba(101, 182, 173, 0.06);

    --text-primary: #2d2520;
    --text-secondary: #5a6b67;
    --text-muted: #8b7d75;

    --accent: #4a9b8f;
    --accent-hover: #388079;
    --accent-glow: rgba(101, 182, 173, 0.18);
    --accent-light: rgba(101, 182, 173, 0.12);
    --accent-dark: #2d6b60;

    --green: #4a9b8f;
    --green-glow: rgba(101, 182, 173, 0.15);
    --purple: #6b4fa8;
    --purple-glow: rgba(107, 79, 168, 0.15);
    --orange: #d9845a;
    --orange-glow: rgba(217, 132, 90, 0.15);

    --border: rgba(101, 182, 173, 0.22);
    --border-light: rgba(101, 182, 173, 0.12);

    --shadow-glow: 0 0 48px rgba(101, 182, 173, 0.15);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.10);

    --nav-scrolled-bg: rgba(245, 243, 240, 0.95);
    --mobile-menu-bg: rgba(245, 243, 240, 1);
    --dropdown-bg: rgba(235, 232, 227, 0.97);
    --glass-bg: rgba(101, 182, 173, 0.05);
    --grid-line-color: rgba(101, 182, 173, 0.08);
}

::selection {
    background: var(--accent-glow);
    color: var(--text-primary);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }