:root {
    --primary: #4361ee;
    --primary-light: #4895ef;
    --primary-dark: #3a0ca3;
    --success: #2ecc71;
    --success-light: #d4edda;
    --danger: #e74c3c;
    --danger-light: #f8d7da;
    --warning: #f39c12;
    --warning-light: #fff3cd;
    --info: #3498db;
    --info-light: #d1ecf1;

    --bg: #f0f2f5;
    --bg-card: #ffffff;
    --bg-input: #f8f9fa;
    --bg-nav: #ffffff;
    --bg-header: #1a1a2e;

    --text: #2d3436;
    --text-secondary: #636e72;
    --text-muted: #b2bec3;
    --text-inverse: #ffffff;

    --border: #e9ecef;
    --border-focus: #4361ee;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    --font-xs: 11px;
    --font-sm: 13px;
    --font-md: 15px;
    --font-lg: 17px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 32px;

    --nav-height: 60px;
    --header-height: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
    --bg: #0f0f23;
    --bg-card: #1a1a2e;
    --bg-input: #16213e;
    --bg-nav: #1a1a2e;
    --bg-header: #16213e;

    --text: #eaeaea;
    --text-secondary: #a0a0b0;
    --text-muted: #6c6c80;
    --text-inverse: #ffffff;

    --border: #2a2a3e;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
}