/* ========================================
   VARIABLES & THEMES
   ======================================== */
:root {
    /* === Core Theme Colors === */
    --accent-color: #6196ff;
    --accent-secondary: color-mix(in srgb, var(--accent-color) 70%, var(--text-color) 30%);
    --text-color: #333333;
    --text-muted: #666666;
    --bg-color: #f9f9f9;

    /* === Surface Colors === */
    --surface-color: #ffffff;
    --surface-alt: #fafafa;
    --card-bg: #ffffff;
    --input-bg: #f5f5f5;
    --highlight-color: #f5f5f5;

    /* === Semantic Colors === */
    --danger-color: #ef4444;
    --danger-hover: #dc2626;
    --danger-bg: #fecaca;
    --success-color: #10b981;
    --success-bg: color-mix(in srgb, var(--success-color) 10%, var(--card-bg));
    --warning-bg: #fee2e2;
    --warning-border: #ef4444;
    --warning-text: #991b1b;
    --warning-text-dark: #fecaca;
    --text-on-accent: #ffffff;
    --text-on-danger: white;

    /* === Border & Shadow === */
    --border-color: #e0e0e0;
    --divider-color: #e5e5e5;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-strong: rgba(0, 0, 0, 0.15);
    --shadow-color-modal: rgba(0, 0, 0, 0.5);
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --overlay-bg-strong: rgba(0, 0, 0, 0.85);
    --overlay-blur: 10px;
    --overlay-blur-light: 2px;
    --overlay-blur-medium: 8px;
    --theme-background-image: none;

    /* === Current Indicators === */
    --current-hour-color: #81ade6;
    --current-day-color: #81ade6;

    /* === Typography === */
    --font-family: "Inter", sans-serif;
    --root-font-size: 16px;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-size-display: 4rem;
    --font-size-display-lg: 8rem;
    --line-height: 1.5;
    --line-height-tight: 1.2;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-scale: 1; /* For accessibility scaling */

    /* === Spacing Scale === */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* === Sizing === */
    --container-max-width: 1600px;
    --side-menu-width: 300px;
    --menu-toggle-size: 3.5rem;
    --menu-btn-height: 3.5rem;
    --close-btn-size: 48px;
    --close-btn-radius: 14px;
    --color-swatch-size: 50px;
    --scrollbar-size: 8px;
    --scrollbar-size-mobile: 6px;
    --scrollbar-thumb-radius: 10px;
    --scroll-indicator-height: 2px;
    --title-container-radius: 30px;
    --title-max-width: min(90vw, 42rem);
    --hamburger-width: 24px;
    --hamburger-height: 18px;
    --hamburger-line: 3px;
    --focus-outline-width: 3px;
    --focus-outline-offset: 2px;

    /* === Effects === */
    --transition-speed: 0.2s;
    --transition-speed-slow: 0.3s;
    --transition-speed-fast: 0.15s;
    --duration-instant: 0.01ms;
    --border-radius: 16px; /* Dynamic via UI settings */
    --border-radius-sm: calc(var(--border-radius) * 0.5);
    --border-radius-xs: calc(var(--border-radius) * 0.25);
    --border-radius-pill: 9999px;
    --backdrop-blur: 10px; /* Dynamic via UI settings */
    --backdrop-blur-strong: calc(var(--backdrop-blur) * 2); /* Dynamic via UI (glass intensity) */
    --glass-opacity: 0.8; /* Dynamic via UI settings */
    --box-shadow: 0 4px 6px var(--shadow-color);
    --box-shadow-sm: 0 2px 5px var(--shadow-color);
    --box-shadow-md: 0 4px 15px var(--shadow-color);
    --box-shadow-hover: 0 6px 20px var(--shadow-color-strong);
    --box-shadow-lg: 0 8px 32px var(--shadow-color);
    --box-shadow-modal: 0 20px 60px var(--shadow-color-modal);
    --box-shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    --shadow-side-menu: 4px 0 16px var(--shadow-color);
    --accent-glow: color-mix(in srgb, var(--accent-color) 40%, transparent);
    --accent-glow-strong: color-mix(in srgb, var(--accent-color) 50%, transparent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);

    /* === Z-Index Scale === */
    --z-canvas: -1000;
    --z-base: 1;
    --z-scroll-bg: 9998;
    --z-scroll-fill: 9999;
    --z-dropdown: 50;
    --z-overlay: 100;
    --z-side-menu: 2000;
    --z-menu-toggle: 1400;
    --z-menu-toggle-open: 2100;
    --z-modal: 1000;
    --z-tooltip: 10000;
    --z-close-btn: 10005;
    --z-bottom-sheet-overlay: 2500;
    --z-bottom-sheet: 2600;
}

/* Theme atmospheres are generated dynamically per theme and applied through --theme-background-image. */