:root {
    --color-bg: #0a0a0a;
    --color-bg-alt: #111111;
    --color-bg-card: #141414;
    --color-bg-hover: #1a1a1a;
    --color-border: #1f1f1f;
    --color-border-light: #2a2a2a;

    --color-green: #00ff41;
    --color-green-dim: #00cc34;
    --color-green-dark: #003d10;

    --color-blue: #00d4ff;
    --color-blue-dim: #00a8cc;
    --color-blue-dark: #001a33;

    --color-white: #e0e0e0;
    --color-gray: #888888;
    --color-gray-dark: #444444;

    --color-red: #ff3333;
    --color-yellow: #ffcc00;

    --font-mono: 'Fira Code', 'Courier New', monospace;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;

    --max-width: 1200px;
    --max-width-narrow: 800px;
}

[data-theme="light"] {
    --color-bg: #f0f2f5;
    --color-bg-alt: #ffffff;
    --color-bg-card: #ffffff;
    --color-bg-hover: #e8eaed;
    --color-border: #d0d5dd;
    --color-border-light: #e0e4e9;

    --color-green: #008833;
    --color-green-dim: #006b28;
    --color-green-dark: #e6f4ec;

    --color-blue: #006688;
    --color-blue-dim: #004d66;
    --color-blue-dark: #e6f0f5;

    --color-white: #1a1a1a;
    --color-gray: #555555;
    --color-gray-dark: #888888;

    --color-red: #cc0000;
}