:root {
    /* Color Palette - HSL for better control */
    --h: 230; /* Primary Huey */
    
    --primary: hsl(var(--h), 85%, 60%);
    --primary-hover: hsl(var(--h), 85%, 50%);
    --primary-soft: hsl(var(--h), 85%, 96%);
    
    --secondary: hsl(215, 15%, 50%);
    --accent: hsl(35, 95%, 55%);
    --success: hsl(150, 80%, 40%);
    --danger: hsl(0, 85%, 60%);
    
    --background: hsl(210, 40%, 98%);
    --surface: hsl(0, 0%, 100%);
    --surface-alt: hsl(210, 40%, 96%);
    
    --text-main: hsl(220, 40%, 15%);
    --text-muted: hsl(215, 20%, 45%);
    --text-white: hsl(0, 0%, 100%);
    
    --border: hsl(210, 30%, 90%);
    --border-soft: hsl(210, 30%, 94%);

    --nav-bg: rgba(255, 255, 255, 0.8);
    --logout-hover: hsl(0, 85%, 97%);
    --success-soft: hsl(150, 80%, 96%);
    --other-month: hsl(210, 40%, 97%);
    --today-bg: hsl(var(--h), 85%, 98.5%);
    --vacation: #FFD400;
    --vacation-ink: #5c4a00;
    --vacation-soft: #FFF4B0;
    --vacation-hover: #FFE56B;
    --vacation-today: #FFEA7A;
    --vacation-muted: #FFF8D6;
    --vacation-border: #F0D24A;
    
    /* Task Vivid Colors */
    --vibrant-1: hsl(230, 85%, 55%); /* Royal Blue */
    --vibrant-2: hsl(160, 80%, 40%); /* Teal */
    --vibrant-3: hsl(35, 95%, 50%);  /* Orange */
    --vibrant-4: hsl(320, 80%, 55%); /* Pink/Magenta */
    --vibrant-5: hsl(260, 80%, 60%); /* Purple */

    /* Shadows */
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1);
    
    /* Layout */
    --radius: 1rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1.5rem;
    --container-max: 1200px;
    --nav-height: 4.5rem;
    --touch-min: 44px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    height: 100%;
}

html { color-scheme: light; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--background);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --primary: hsl(230, 85%, 70%);
    --primary-hover: hsl(230, 90%, 76%);
    --primary-soft: hsl(230, 32%, 20%);
    --secondary: hsl(215, 14%, 72%);
    --accent: hsl(35, 92%, 62%);
    --success: hsl(150, 62%, 52%);
    --danger: hsl(0, 78%, 66%);
    --background: hsl(222, 28%, 7%);
    --surface: hsl(222, 22%, 12%);
    --surface-alt: hsl(222, 18%, 16%);
    --text-main: hsl(210, 30%, 96%);
    --text-muted: hsl(215, 14%, 72%);
    --border: hsl(220, 14%, 26%);
    --border-soft: hsl(220, 14%, 20%);
    --vibrant-1: hsl(230, 90%, 72%);
    --vibrant-2: hsl(160, 70%, 52%);
    --vibrant-3: hsl(35, 95%, 60%);
    --vibrant-4: hsl(320, 80%, 68%);
    --vibrant-5: hsl(260, 80%, 74%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 14px 28px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 40px rgba(0, 0, 0, 0.45);
    --nav-bg: rgba(14, 17, 27, 0.9);
    --logout-hover: hsl(0, 32%, 18%);
    --success-soft: hsl(150, 28%, 16%);
    --other-month: hsl(222, 18%, 9%);
    --today-bg: hsl(230, 32%, 18%);
    --vacation-soft: hsl(45, 32%, 16%);
    --vacation-hover: hsl(45, 38%, 22%);
    --vacation-today: hsl(45, 40%, 20%);
    --vacation-muted: hsl(45, 18%, 13%);
    --vacation-border: hsl(45, 42%, 32%);
}