/* ===== CSS VARIABLES ROOT ===== */
:root {
    /* Font */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 3rem;

    /* Colors */
    --accent-primary: #667eea;
    --accent-secondary: #764ba2;
    --success: #4ECDC4;
    --warning: #FFE66D;
    --danger: #FF6B6B;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Timer */
    --timer-size: 320px;
    --timer-stroke-width: 8px;

    /* Default Mode Colors (Focus) */
    --mode-primary: #FF6B6B;
    --mode-secondary: #FF8E53;
    --mode-gradient: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    --mode-glow: rgba(255, 107, 107, 0.4);

    /* Default Theme (Dark/Midnight) */
    --bg-primary: #0D0D14;
    --bg-secondary: #151520;
    --bg-tertiary: #1E1E2E;
    --bg-card: #252535;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0B0;
    --text-muted: #6B6B7B;
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(30, 30, 46, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --modal-bg: #1E1E2E;
    --modal-overlay: rgba(0, 0, 0, 0.8);
}

/* ===== MODE COLORS - Using body attribute ===== */
/* Focus Mode - Warm Red/Orange (Default) */
body[data-mode="focus"] {
    --mode-primary: #FF6B6B;
    --mode-secondary: #FF8E53;
    --mode-gradient: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    --mode-glow: rgba(255, 107, 107, 0.4);
}

/* Short Break Mode - Teal/Cyan */
body[data-mode="shortBreak"] {
    --mode-primary: #4ECDC4;
    --mode-secondary: #44A08D;
    --mode-gradient: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
    --mode-glow: rgba(78, 205, 196, 0.4);
}

/* Long Break Mode - Purple */
body[data-mode="longBreak"] {
    --mode-primary: #667eea;
    --mode-secondary: #764ba2;
    --mode-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --mode-glow: rgba(102, 126, 234, 0.4);
}

/* ===== THEME: MIDNIGHT (Default Dark) ===== */
body[data-theme="dark"],
body[data-theme="midnight"] {
    --bg-primary: #0D0D14;
    --bg-secondary: #151520;
    --bg-tertiary: #1E1E2E;
    --bg-card: #252535;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0B0;
    --text-muted: #6B6B7B;
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(30, 30, 46, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --modal-bg: #1E1E2E;
    --modal-overlay: rgba(0, 0, 0, 0.8);
}

/* ===== THEME: AURORA ===== */
body[data-theme="aurora"] {
    --bg-primary: #0a192f;
    --bg-secondary: #112240;
    --bg-tertiary: #1d3557;
    --bg-card: #233554;
    --text-primary: #ccd6f6;
    --text-secondary: #8892b0;
    --text-muted: #495670;
    --border-color: rgba(100, 255, 218, 0.1);
    --glass-bg: rgba(17, 34, 64, 0.8);
    --glass-border: rgba(100, 255, 218, 0.15);
    --accent-primary: #64ffda;
    --accent-secondary: #00bcd4;
}

/* ===== THEME: SUNSET ===== */
body[data-theme="sunset"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --bg-card: #1f4068;
    --text-primary: #eee2dc;
    --text-secondary: #bab2b5;
    --text-muted: #7d7a7a;
    --border-color: rgba(255, 107, 107, 0.15);
    --glass-bg: rgba(22, 33, 62, 0.75);
    --glass-border: rgba(255, 180, 162, 0.2);
    --accent-primary: #e94560;
    --accent-secondary: #ff6b6b;
}

/* ===== THEME: FOREST ===== */
body[data-theme="forest"] {
    --bg-primary: #0d1b0d;
    --bg-secondary: #1a2f1a;
    --bg-tertiary: #2d4a2d;
    --bg-card: #3d5a3d;
    --text-primary: #e8f5e9;
    --text-secondary: #a5d6a7;
    --text-muted: #66bb6a;
    --border-color: rgba(129, 199, 132, 0.15);
    --glass-bg: rgba(45, 74, 45, 0.7);
    --glass-border: rgba(129, 199, 132, 0.2);
    --accent-primary: #81c784;
    --accent-secondary: #4caf50;
}

/* ===== THEME: OCEAN ===== */
body[data-theme="ocean"] {
    --bg-primary: #0a1929;
    --bg-secondary: #0d2137;
    --bg-tertiary: #132f4c;
    --bg-card: #173a5e;
    --text-primary: #e3f2fd;
    --text-secondary: #90caf9;
    --text-muted: #5c8fbd;
    --border-color: rgba(33, 150, 243, 0.15);
    --glass-bg: rgba(19, 47, 76, 0.75);
    --glass-border: rgba(33, 150, 243, 0.2);
    --accent-primary: #29b6f6;
    --accent-secondary: #0288d1;
}

/* ===== THEME: LAVENDER ===== */
body[data-theme="lavender"] {
    --bg-primary: #1a1625;
    --bg-secondary: #251d33;
    --bg-tertiary: #352a47;
    --bg-card: #453859;
    --text-primary: #f3e5f5;
    --text-secondary: #ce93d8;
    --text-muted: #9575cd;
    --border-color: rgba(186, 104, 200, 0.15);
    --glass-bg: rgba(53, 42, 71, 0.75);
    --glass-border: rgba(186, 104, 200, 0.2);
    --accent-primary: #ba68c8;
    --accent-secondary: #9c27b0;
}

/* ===== THEME: ROSE ===== */
body[data-theme="rose"] {
    --bg-primary: #1f1318;
    --bg-secondary: #2d1b23;
    --bg-tertiary: #3d2833;
    --bg-card: #4d3544;
    --text-primary: #fce4ec;
    --text-secondary: #f48fb1;
    --text-muted: #c2185b;
    --border-color: rgba(233, 30, 99, 0.15);
    --glass-bg: rgba(61, 40, 51, 0.75);
    --glass-border: rgba(233, 30, 99, 0.2);
    --accent-primary: #ec407a;
    --accent-secondary: #e91e63;
}

/* ===== THEME: COFFEE ===== */
body[data-theme="coffee"] {
    --bg-primary: #1a140f;
    --bg-secondary: #2d2318;
    --bg-tertiary: #3e3127;
    --bg-card: #4f3f34;
    --text-primary: #efebe9;
    --text-secondary: #bcaaa4;
    --text-muted: #8d6e63;
    --border-color: rgba(161, 136, 127, 0.15);
    --glass-bg: rgba(62, 49, 39, 0.75);
    --glass-border: rgba(161, 136, 127, 0.2);
    --accent-primary: #a1887f;
    --accent-secondary: #795548;
}

/* ===== THEME: DRACULA ===== */
body[data-theme="dracula"] {
    --bg-primary: #282a36;
    --bg-secondary: #1e1f29;
    --bg-tertiary: #343746;
    --bg-card: #44475a;
    --text-primary: #f8f8f2;
    --text-secondary: #bd93f9;
    --text-muted: #6272a4;
    --border-color: rgba(189, 147, 249, 0.15);
    --glass-bg: rgba(52, 55, 70, 0.75);
    --glass-border: rgba(189, 147, 249, 0.2);
    --accent-primary: #ff79c6;
    --accent-secondary: #bd93f9;
}

/* ===== LIGHT THEMES ===== */
body[data-theme="light"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8e8e8;
    --bg-card: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #7a7a7a;
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);
}

body[data-theme="cream"] {
    --bg-primary: #faf8f5;
    --bg-secondary: #fff9f0;
    --bg-tertiary: #f0ebe3;
    --bg-card: #ffffff;
    --text-primary: #2c2c2c;
    --text-secondary: #5c5c5c;
    --text-muted: #8c8c8c;
    --border-color: rgba(139, 90, 43, 0.1);
    --glass-bg: rgba(255, 249, 240, 0.9);
    --glass-border: rgba(139, 90, 43, 0.15);
    --accent-primary: #d4a574;
    --accent-secondary: #8b5a2b;
}

/* ===== THEME: SNOW ❄️ ===== */
body[data-theme="snow"] {
    --bg-primary: #0D0D14;
    --bg-secondary: #151520;
    --bg-tertiary: #1E1E2E;
    --bg-card: #252535;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0B0;
    --text-muted: #6B6B7B;
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(30, 30, 46, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --modal-bg: #1E1E2E;
    --modal-overlay: rgba(0, 0, 0, 0.8);
}

/* Snowflakes Container */
body[data-theme="snow"] .snowflakes {
    display: block !important;
}

.snowflakes {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -20px;
    color: #fff;
    font-size: 1em;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    animation: snowfall linear infinite;
    opacity: 0.8;
}

@keyframes snowfall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.3;
    }
}

/* Different snowflake sizes and speeds */
.snowflake:nth-child(1) {
    left: 5%;
    animation-duration: 8s;
    font-size: 12px;
    animation-delay: 0s;
}

.snowflake:nth-child(2) {
    left: 10%;
    animation-duration: 12s;
    font-size: 8px;
    animation-delay: 1s;
}

.snowflake:nth-child(3) {
    left: 15%;
    animation-duration: 10s;
    font-size: 14px;
    animation-delay: 2s;
}

.snowflake:nth-child(4) {
    left: 20%;
    animation-duration: 9s;
    font-size: 10px;
    animation-delay: 0.5s;
}

.snowflake:nth-child(5) {
    left: 25%;
    animation-duration: 11s;
    font-size: 16px;
    animation-delay: 3s;
}

.snowflake:nth-child(6) {
    left: 30%;
    animation-duration: 7s;
    font-size: 6px;
    animation-delay: 1.5s;
}

.snowflake:nth-child(7) {
    left: 35%;
    animation-duration: 13s;
    font-size: 12px;
    animation-delay: 2.5s;
}

.snowflake:nth-child(8) {
    left: 40%;
    animation-duration: 8s;
    font-size: 18px;
    animation-delay: 0s;
}

.snowflake:nth-child(9) {
    left: 45%;
    animation-duration: 10s;
    font-size: 8px;
    animation-delay: 4s;
}

.snowflake:nth-child(10) {
    left: 50%;
    animation-duration: 9s;
    font-size: 14px;
    animation-delay: 1s;
}

.snowflake:nth-child(11) {
    left: 55%;
    animation-duration: 12s;
    font-size: 10px;
    animation-delay: 3.5s;
}

.snowflake:nth-child(12) {
    left: 60%;
    animation-duration: 7s;
    font-size: 16px;
    animation-delay: 2s;
}

.snowflake:nth-child(13) {
    left: 65%;
    animation-duration: 11s;
    font-size: 6px;
    animation-delay: 0.5s;
}

.snowflake:nth-child(14) {
    left: 70%;
    animation-duration: 8s;
    font-size: 12px;
    animation-delay: 4.5s;
}

.snowflake:nth-child(15) {
    left: 75%;
    animation-duration: 14s;
    font-size: 20px;
    animation-delay: 1.5s;
}

.snowflake:nth-child(16) {
    left: 80%;
    animation-duration: 9s;
    font-size: 8px;
    animation-delay: 3s;
}

.snowflake:nth-child(17) {
    left: 85%;
    animation-duration: 10s;
    font-size: 14px;
    animation-delay: 2.5s;
}

.snowflake:nth-child(18) {
    left: 90%;
    animation-duration: 8s;
    font-size: 10px;
    animation-delay: 0s;
}

.snowflake:nth-child(19) {
    left: 95%;
    animation-duration: 12s;
    font-size: 16px;
    animation-delay: 5s;
}

.snowflake:nth-child(20) {
    left: 3%;
    animation-duration: 11s;
    font-size: 12px;
    animation-delay: 2s;
}

.snowflake:nth-child(21) {
    left: 8%;
    animation-duration: 9s;
    font-size: 8px;
    animation-delay: 4s;
}

.snowflake:nth-child(22) {
    left: 13%;
    animation-duration: 13s;
    font-size: 18px;
    animation-delay: 1s;
}

.snowflake:nth-child(23) {
    left: 18%;
    animation-duration: 7s;
    font-size: 6px;
    animation-delay: 3.5s;
}

.snowflake:nth-child(24) {
    left: 23%;
    animation-duration: 10s;
    font-size: 14px;
    animation-delay: 0.5s;
}

.snowflake:nth-child(25) {
    left: 28%;
    animation-duration: 8s;
    font-size: 10px;
    animation-delay: 2.5s;
}

.snowflake:nth-child(26) {
    left: 33%;
    animation-duration: 12s;
    font-size: 16px;
    animation-delay: 5.5s;
}

.snowflake:nth-child(27) {
    left: 38%;
    animation-duration: 9s;
    font-size: 8px;
    animation-delay: 1.5s;
}

.snowflake:nth-child(28) {
    left: 43%;
    animation-duration: 11s;
    font-size: 12px;
    animation-delay: 4.5s;
}

.snowflake:nth-child(29) {
    left: 48%;
    animation-duration: 8s;
    font-size: 20px;
    animation-delay: 0s;
}

.snowflake:nth-child(30) {
    left: 53%;
    animation-duration: 14s;
    font-size: 6px;
    animation-delay: 3s;
}

.snowflake:nth-child(31) {
    left: 58%;
    animation-duration: 7s;
    font-size: 14px;
    animation-delay: 6s;
}

.snowflake:nth-child(32) {
    left: 63%;
    animation-duration: 10s;
    font-size: 10px;
    animation-delay: 2s;
}

.snowflake:nth-child(33) {
    left: 68%;
    animation-duration: 9s;
    font-size: 16px;
    animation-delay: 4s;
}

.snowflake:nth-child(34) {
    left: 73%;
    animation-duration: 12s;
    font-size: 8px;
    animation-delay: 1s;
}

.snowflake:nth-child(35) {
    left: 78%;
    animation-duration: 8s;
    font-size: 18px;
    animation-delay: 5s;
}

.snowflake:nth-child(36) {
    left: 83%;
    animation-duration: 11s;
    font-size: 12px;
    animation-delay: 3.5s;
}

.snowflake:nth-child(37) {
    left: 88%;
    animation-duration: 9s;
    font-size: 14px;
    animation-delay: 0.5s;
}

.snowflake:nth-child(38) {
    left: 93%;
    animation-duration: 13s;
    font-size: 6px;
    animation-delay: 2.5s;
}

.snowflake:nth-child(39) {
    left: 98%;
    animation-duration: 7s;
    font-size: 10px;
    animation-delay: 4.5s;
}

.snowflake:nth-child(40) {
    left: 2%;
    animation-duration: 10s;
    font-size: 16px;
    animation-delay: 6.5s;
}