/* ==========================================================================
   M3 TOKENS (Updated for Ultimate Smoothness & Elevations)
   ========================================================================== */
:root {
    /* Primary Colors (Deep Blue) */
    --md-sys-color-primary: #0a3a6a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d4e3ff;
    --md-sys-color-on-primary-container: #001c3a;
    
    /* Secondary Colors (Vibrant Red) */
    --md-sys-color-secondary: #d3222a;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #ffdad6;
    --md-sys-color-on-secondary-container: #410002;
    
    /* Surface Colors (Pixel Light Theme) */
    --md-sys-color-surface: #fdfcff;
    --md-sys-color-on-surface: #1a1c1e;
    --md-sys-color-surface-container-low: #f3f3f7;
    --md-sys-color-surface-container: #ededf1;
    --md-sys-color-surface-container-high: #e7e8ec;
    --md-sys-color-outline: #74777f;

    /* Shapes */
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* Elevations (Android QPR3 Style - Softer, More Realistic Shadows) */
    --md-sys-elevation-0: 0px 0px 0px 0px rgba(0,0,0,0);
    --md-sys-elevation-1: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 1px 3px 1px rgba(0,0,0,0.05);
    --md-sys-elevation-2: 0px 2px 6px 2px rgba(0,0,0,0.08), 0px 1px 2px 0px rgba(0,0,0,0.1);
    --md-sys-elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.1), 0px 1px 3px 0px rgba(0,0,0,0.1);
    --md-sys-elevation-4: 0px 6px 10px 4px rgba(0,0,0,0.1), 0px 2px 4px 0px rgba(0,0,0,0.12);
    --md-sys-elevation-5: 0px 8px 12px 6px rgba(0,0,0,0.12), 0px 3px 6px 0px rgba(0,0,0,0.14);
    
    /* Motion / Animations (Google "Butter" Curve - VERY IMPORTANT) */
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-duration-short: 150ms;
    --md-sys-motion-duration-medium: 400ms;
}

/* Dark Mode Overrides */
body.dark-mode {
    --md-sys-color-surface: #111318;
    --md-sys-color-on-surface: #e2e2e9;
    --md-sys-color-surface-container-low: #1a1c22;
    --md-sys-color-surface-container: #202229;
    --md-sys-color-surface-container-high: #2a2c35;
    --md-sys-color-primary-container: #003366;
    --md-sys-color-on-primary-container: #d4e3ff;
}