:root {
    /* Light Theme Tokens (RGB format for Tailwind opacity support) */
    --primary: 131 84 0; /* #835400 */
    --on-primary: 255 255 255;
    --primary-container: 249 168 37; /* #f9a825 */
    --on-primary-container: 103 65 0;
    
    --secondary: 0 103 131; /* #006783 */
    --on-secondary: 255 255 255;
    --secondary-container: 114 213 254; /* #72d5fe */
    --on-secondary-container: 0 92 118;
    
    --tertiary: 62 95 143; /* #3e5f8f */
    --on-tertiary: 255 255 255;
    --tertiary-container: 153 186 239; /* #99baef */
    --on-tertiary-container: 38 74 120;
    
    --error: 186 26 26;
    --on-error: 255 255 255;
    --error-container: 255 218 214;
    --on-error-container: 147 0 10;
    
    --background: 252 249 248;
    --on-background: 27 27 28;
    
    --surface: 252 249 248;
    --on-surface: 27 27 28;
    --surface-variant: 229 226 225;
    --on-surface-variant: 82 68 52;
    
    --outline: 133 116 98;
    --outline-variant: 215 195 174;
    
    --surface-container-lowest: 255 255 255;
    --surface-container-low: 246 243 242;
    --surface-container: 240 237 237;
    --surface-container-high: 234 231 231;
    --surface-container-highest: 229 226 225;

    --inverse-surface: 48 48 48;
    --inverse-on-surface: 243 240 239;
    --inverse-primary: 255 185 87;
}

.dark {
    /* Dark Theme Tokens (M3 standard mapping) */
    --primary: 255 185 81; /* #ffb951 */
    --on-primary: 69 43 0;
    --primary-container: 99 63 0;
    --on-primary-container: 255 221 182;
    
    --secondary: 91 213 250; /* #5bd5fa */
    --on-secondary: 0 53 68;
    --secondary-container: 0 77 97;
    --on-secondary-container: 189 233 255;
    
    --tertiary: 166 200 255; /* #a6c8ff */
    --on-tertiary: 4 48 94;
    --tertiary-container: 37 71 119;
    --on-tertiary-container: 213 227 255;
    
    --error: 255 180 171;
    --on-error: 105 0 5;
    --error-container: 147 0 10;
    --on-error-container: 255 218 214;
    
    --background: 20 19 19; /* #141313 */
    --on-background: 230 225 225;
    
    --surface: 20 19 19;
    --on-surface: 230 225 225;
    --surface-variant: 82 68 52;
    --on-surface-variant: 215 195 174;
    
    --outline: 159 141 123;
    --outline-variant: 82 68 52;
    
    --surface-container-lowest: 15 14 14;
    --surface-container-low: 28 27 27;
    --surface-container: 32 31 31;
    --surface-container-high: 43 41 41;
    --surface-container-highest: 54 52 52;

    --inverse-surface: 230 225 225;
    --inverse-on-surface: 49 48 48;
    --inverse-primary: 131 84 0;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: rgb(var(--background)); 
    color: rgb(var(--on-background));
    transition: background-color 0.3s ease, color 0.3s ease;
}

.glass-card { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
}

.dark .glass-card {
    background: rgba(32, 31, 31, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Base utility for standardizing navigation height and sticky offsets */
.nav-height {
    height: 5rem; /* 80px */
}