:root {
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --bg: #fafafa;
    --bg-elevated: #ffffff;
    --bg-subtle: #f3f4f6;
    --surface: rgba(255, 255, 255, 0.7);
    --surface-hover: rgba(255, 255, 255, 0.9);
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);

    --text: #111111;
    --text-secondary: #555555;
    --text-tertiary: #888888;
    --text-inverse: #ffffff;

    --accent: #6366f1;
    --accent-light: #818cf8;
    --accent-subtle: rgba(99, 102, 241, 0.08);
    --accent-glow: rgba(99, 102, 241, 0.25);

    --success: #22c55e;
    --error: #ef4444;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.1);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.2s;
    --duration-normal: 0.4s;
    --duration-slow: 0.8s;

    --header-h: 72px;
    --container: 1120px;

    --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
    --gradient-mesh: radial-gradient(at 20% 80%, rgba(99,102,241,0.15) 0%, transparent 50%),
                     radial-gradient(at 80% 20%, rgba(139,92,246,0.1) 0%, transparent 50%),
                     radial-gradient(at 50% 50%, rgba(167,139,250,0.05) 0%, transparent 50%);
}

[data-theme="dark"] {
    --bg: #0a0a0a;
    --bg-elevated: #141414;
    --bg-subtle: #1a1a1a;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);

    --text: #e5e5e5;
    --text-secondary: #a1a1a1;
    --text-tertiary: #666666;
    --text-inverse: #0a0a0a;

    --accent: #818cf8;
    --accent-light: #a5b4fc;
    --accent-subtle: rgba(129, 140, 248, 0.1);
    --accent-glow: rgba(129, 140, 248, 0.2);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);

    --gradient-primary: linear-gradient(135deg, #818cf8, #a78bfa, #c4b5fd);
    --gradient-mesh: radial-gradient(at 20% 80%, rgba(129,140,248,0.08) 0%, transparent 50%),
                     radial-gradient(at 80% 20%, rgba(167,139,250,0.06) 0%, transparent 50%),
                     radial-gradient(at 50% 50%, rgba(196,181,253,0.03) 0%, transparent 50%);
}