:root {
    /* Light mode (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f0f0f0;
    --bg-tertiary: #e8e8e8;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --accent: #4285F4;
    --accent-hover: #3367d6;
    --accent-light: #e8f0fe;
    --accent-text: #ffffff;
    --border: #dee2e6;
    --border-light: #f1f5f9;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* Border radius — flat style */
    --radius-sm: 4px;
    --radius: 0;
    --radius-lg: 0;
    --radius-full: 9999px;

    /* Transitions */
    --transition: 0.2s ease;

    /* Navbar */
    --navbar-bg: #4285F4;
    --navbar-text: #ffffff;

    /* Timer */
    --timer-font: 'Courier New', 'Lucida Console', 'Monaco', monospace;
    --timer-size: clamp(40px, 10vw, 80px);
    --timer-color: var(--text-primary);

    /* States */
    --state-running: #22c55e;
    --state-paused: #f59e0b;
    --state-alarm: #ef4444;

    /* Pomodoro */
    --pomodoro-work: #ef4444;
    --pomodoro-break: #22c55e;

    /* Cookie banner */
    --cookie-bg: #f8f9fa;
    --cookie-border: #dee2e6;
}

[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #6c757d;
    --accent: #4285F4;
    --accent-hover: #5a95f5;
    --accent-light: #1e3a5f;
    --accent-text: #ffffff;
    --border: #2a2a4a;
    --border-light: #1e293b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);

    --navbar-bg: #0f172a;
    --navbar-text: #ffffff;

    --cookie-bg: #16213e;
    --cookie-border: #2a2a4a;
}