:root {
    /* Base Variables */
    --font-stack: 'Outfit', 'Segoe UI', system-ui, sans-serif;
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 24px;
    --radius-xl: 32px;

    /* Transitions */
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fresh Nature (Default) */
:root {
    --primary: #00b894;
    --primary-gradient: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --surface: rgba(255, 255, 255, 0.7);
    --surface-hover: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.4);
    --text-main: #2d3436;
    --text-muted: #636e72;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="ocean"] {
    --primary: #0984e3;
    --primary-gradient: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%);
    --bg-gradient: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}

[data-theme="sunset"] {
    --primary: #e17055;
    --primary-gradient: linear-gradient(135deg, #e17055 0%, #fab1a0 100%);
    --bg-gradient: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

[data-theme="dark"] {
    --primary: #a29bfe;
    --primary-gradient: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    --bg-gradient: linear-gradient(135deg, #2d3436 0%, #000000 100%);
    --surface: rgba(30, 30, 30, 0.7);
    --surface-hover: rgba(50, 50, 50, 0.9);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #dfe6e9;
    --text-muted: #b2bec3;
}