/* ==========================================================================
   DESIGN TOKENS (CSS Variables)
   Standard & Expressive configuration
   ========================================================================== */



:root {
    /* --- TYPE SCALE (Standard - Roboto) --- */
    --font-family-std: 'Roboto', sans-serif;
    --md-sys-typescale-display-large: 400 57px/64px var(--font-family-std);
    --md-sys-typescale-display-medium: 400 45px/52px var(--font-family-std);
    --md-sys-typescale-display-small: 400 36px/44px var(--font-family-std);
    --md-sys-typescale-body-large: 400 16px/24px var(--font-family-std);
    --md-sys-typescale-body-medium: 400 14px/20px var(--font-family-std);
    --md-sys-typescale-label-large: 500 14px/20px var(--font-family-std);
    --md-sys-typescale-label-medium: 500 12px/16px var(--font-family-std);
    --md-sys-typescale-headline-small: 400 24px/32px var(--font-family-std);
    --md-sys-typescale-headline-medium: 400 28px/36px var(--font-family-std);
    --md-sys-typescale-title-medium: 500 16px/24px var(--font-family-std);
    --md-sys-typescale-title-large: 400 22px/28px var(--font-family-std);

    /* --- SHAPES (Standard) --- */
    --md-sys-shape-corner-extra-small: 4px;
    --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: 100px; /* Pill */

    /* --- MOTION --- */
    --md-sys-motion-standard-easing: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-sys-motion-standard: 200ms var(--md-sys-motion-standard-easing);
    --md-sys-motion-emphasized: 400ms var(--md-sys-motion-standard-easing);
    --motion-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* --- ELEVATION --- */
    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.3);
    --md-sys-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.15);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15);
    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.15);

    /* --- BASE COLORS (Neutrals) --- */
    --md-sys-color-surface: #F4F7FC;
    --md-sys-color-surface-variant: #E1E2EC;
    --md-sys-color-surface-container: #FFFFFF;
    --md-sys-color-surface-container-high: #F0F3F9;
    --md-sys-color-surface-container-low: #F0F5F1;
    --md-sys-color-surface-container-highest: #DEE4E1;
    --md-sys-color-surface-container-highest-rgb: 222, 228, 225;
    --md-sys-color-outline: #74777F;
    --md-sys-color-outline-variant: #C4C7D0;
    --md-sys-color-on-surface: #1B1B1F;
    --md-sys-color-on-surface-variant: #44474F;
    --md-sys-color-inverse-surface: #313033;
    --md-sys-color-inverse-on-surface: #F4EFF4;
    --md-sys-color-inverse-primary: #D0BCFF;

    /* --- DYNAMIC THEME COLORS (Default: Blue) --- */
    --md-sys-color-primary: #2962FF;
    --md-sys-color-primary-rgb: 41, 98, 255;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #E0EAFF;
    --md-sys-color-on-primary-container: #001A4D;
    --md-sys-color-secondary: #5A5D72; 
    --md-sys-color-secondary-rgb: 90, 93, 114;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #DDE2F0;
    --md-sys-color-on-secondary-container: #181C28;
    --md-sys-color-tertiary: #7D5260;
    --md-sys-color-tertiary-rgb: 125, 82, 96;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFD8E4;
    --md-sys-color-on-tertiary-container: #31111D;

    /* --- SEMANTIC COLORS (Fixed) --- */
    --md-sys-color-error: #BA1A1A;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #FFDAD6;
    --md-sys-color-on-error-container: #410002;

    --md-sys-color-success: #146c2e;
    --md-sys-color-on-success: #FFFFFF;
    --md-sys-color-success-container: #c4eed0;
    --md-sys-color-on-success-container: #07210e;

    --md-sys-color-warning: #d97706;
    --md-sys-color-on-warning: #FFFFFF;
    --md-sys-color-warning-container: #fef3c7;
    --md-sys-color-on-warning-container: #451a03;

    /* --- STATE LAYER OPACITIES --- */
    --md-sys-state-hover: 0.08;
    --md-sys-state-focus: 0.12;
    --md-sys-state-pressed: 0.12;
}

/* --- THEME VARIATIONS (Data Attributes) --- */
/* PURPLE (Expressive Default) */
[data-seed="purple"] {
    --md-sys-color-primary: #6750A4;
    --md-sys-color-primary-rgb: 103, 80, 164;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005D;
    --md-sys-color-secondary: #625B71;
    --md-sys-color-secondary-rgb: 98, 91, 113;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1D192B;
    --md-sys-color-tertiary: #7D5260;
    --md-sys-color-tertiary-rgb: 125, 82, 96;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFD8E4;
    --md-sys-color-on-tertiary-container: #31111D;
    --md-sys-color-surface-variant: #E7E0EB;
    --md-sys-color-on-surface-variant: #49454F;
}
/* GREEN (Key Lime / Real - from md31) */
[data-seed="green"] {
    --md-sys-color-primary: #006C51; 
    --md-sys-color-primary-rgb: 0, 108, 81;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #83F8CC; 
    --md-sys-color-on-primary-container: #002116;
    --md-sys-color-secondary: #4C6359;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #CEE9DB;
    --md-sys-color-on-secondary-container: #082017;
    --md-sys-color-tertiary: #3E6373;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #C2E8FB;
    --md-sys-color-on-tertiary-container: #001F29;
    --md-sys-color-surface-variant: #DBE5DE;
    --md-sys-color-on-surface-variant: #404944;
}
/* TEAL (From md31/md32 implicit) */
[data-seed="teal"] {
    --md-sys-color-primary: #006A6A;
    --md-sys-color-primary-rgb: 0, 106, 106;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #6FF7F6;
    --md-sys-color-on-primary-container: #002020;
    --md-sys-color-secondary: #4A6363;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #CCE8E7;
    --md-sys-color-on-secondary-container: #051F1F;
    --md-sys-color-tertiary: #4B607C;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #D3E4FF;
    --md-sys-color-on-tertiary-container: #041C35;
}
/* MONOCHROME */
[data-seed="monochrome"] {
    --md-sys-color-primary: #5F6368;
    --md-sys-color-primary-rgb: 95, 99, 104;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #F1F3F4;
    --md-sys-color-on-primary-container: #202124;
    --md-sys-color-secondary-container: #E8EAED;
    --md-sys-color-on-secondary-container: #3C4043;
}
/* RED */
[data-seed="red"] {
    --md-sys-color-primary: #B3261E;
    --md-sys-color-primary-rgb: 179, 38, 30;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #F9DEDC;
    --md-sys-color-on-primary-container: #410E0B;
    --md-sys-color-secondary-container: #F4DDDB;
    --md-sys-color-on-secondary-container: #2B1513;
}
[data-seed="pink"] {
    --md-sys-color-primary: #BC004B;
    --md-sys-color-primary-rgb: 188, 0, 75;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #FFD9DE;
    --md-sys-color-on-primary-container: #400014;
    --md-sys-color-secondary-container: #F0DBE1;
    --md-sys-color-on-secondary-container: #2B151C;
}
/* ORANGE */
[data-seed="orange"] {
    --md-sys-color-primary: #8B5000;
    --md-sys-color-primary-rgb: 139, 80, 0;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #FFDCBE;
    --md-sys-color-on-primary-container: #2C1600;
    --md-sys-color-secondary-container: #F2DFD1;
    --md-sys-color-on-secondary-container: #27190F;
}
/* YELLOW */
[data-seed="yellow"] {
    --md-sys-color-primary: #6D5E00;
    --md-sys-color-primary-rgb: 109, 94, 0;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #FFE24B;
    --md-sys-color-on-primary-container: #211B00;
    --md-sys-color-secondary-container: #E9E2D0;
    --md-sys-color-on-secondary-container: #1F1B0D;
}
/* CYAN */
[data-seed="cyan"] {
    --md-sys-color-primary: #0097A7;
    --md-sys-color-primary-rgb: 0, 151, 167;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #8EF7FF;
    --md-sys-color-on-primary-container: #002022;
    --md-sys-color-secondary-container: #CCE8E9;
    --md-sys-color-on-secondary-container: #051F23;
}

/* --- DARK & OLED THEME OVERRIDES --- */
[data-theme="dark"], [data-theme="oled"] {
    --md-sys-color-surface: #111318;
    --md-sys-color-surface-variant: #44474F;
    --md-sys-color-surface-container: #1F2229;
    --md-sys-color-surface-container-high: #292C35;
    --md-sys-color-surface-container-low: #191c20;
    --md-sys-color-surface-container-highest: #333537;
    --md-sys-color-surface-container-highest-rgb: 51, 53, 55;
    --md-sys-color-shadow: 0, 0, 0;
    --md-sys-color-outline: #8D9199;
    --md-sys-color-outline-variant: #44474F;
    --md-sys-color-on-surface: #E2E2E6;
    --md-sys-color-on-surface-variant: #C4C7D0;
    --md-sys-color-inverse-surface: #E2E2E6;
    --md-sys-color-inverse-on-surface: #2F3033;
    /* --md-sys-color-inverse-primary: DEFINED PER SEED BELOW */

    --md-sys-color-primary: #B0C5FF; /* Default Blue Dark */
    --md-sys-color-primary-rgb: 176, 197, 255;
    --md-sys-color-on-primary: #002B75;
    --md-sys-color-primary-container: #0042A9;
    --md-sys-color-on-primary-container: #D9E2FF;
    --md-sys-color-secondary-container: #3E4450;
    --md-sys-color-on-secondary-container: #DDE2F0;
    --md-sys-color-secondary-rgb: 90, 93, 114; /* Corrected to match dark secondary */
    --md-sys-color-inverse-primary: #2962FF;

    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;

    --md-sys-color-success: #75db8b;
    --md-sys-color-on-success: #003912;
    --md-sys-color-success-container: #00531e;
    --md-sys-color-on-success-container: #bcebe0; /* Improved readability */


    /* --- WARNING COLORS (DARK) --- */
    --md-sys-color-warning: #EFB041;
    --md-sys-color-on-warning: #452B00;
    --md-sys-color-warning-container: #633F00;
    --md-sys-color-on-warning-container: #FFDDAE;

    --md-sys-elevation-1: none;
    --md-sys-elevation-2: none;
    --md-sys-elevation-3: none;
}

/* OLED Specific Overrides (True Black) */
[data-theme="oled"] {
    --md-sys-color-surface: #000000;
    --md-sys-color-surface-container: #000000; /* Main cards match bg */
    --md-sys-color-surface-container-low: #000000;
    
    /* Slightly lighter for distinction only when needed */
    --md-sys-color-surface-container-high: #121212; 
    --md-sys-color-surface-container-highest: #1C1C1C;
    
    /* Stronger outlines for separation since elevation is gone */
    --md-sys-color-outline-variant: #333333;
}

/* Force borders on cards in OLED mode because elevation is invisible */
/* Exclude cards that have their own background colors (semantic, filled, etc) */
[data-theme="oled"] .md-card:not(.card-semantic):not(.card-filled):not(.card-colorful), 
[data-theme="oled"] .settings-card,
[data-theme="oled"] .widget-card {
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* Dark & OLED Theme Color Seeds */
[data-theme="dark"][data-seed="purple"], [data-theme="oled"][data-seed="purple"] {
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    --md-sys-color-inverse-primary: #6750A4;
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;
    --md-sys-color-tertiary: #EFB8C8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633B48;
    --md-sys-color-on-tertiary-container: #FFD8E4;
}
[data-theme="dark"][data-seed="green"], [data-theme="oled"][data-seed="green"] {
    --md-sys-color-primary: #78DB9F;
    --md-sys-color-on-primary: #003920;
    --md-sys-color-primary-container: #005230;
    --md-sys-color-on-primary-container: #93F9B9;
    --md-sys-color-inverse-primary: #006C51;
    --md-sys-color-secondary-container: #364B3B;
    --md-sys-color-on-secondary-container: #D8E7CC;
    --md-sys-color-tertiary: #A6CCE0;
    --md-sys-color-on-tertiary: #003543;
    --md-sys-color-tertiary-container: #224C5C;
    --md-sys-color-on-tertiary-container: #C2E8FB;

}
[data-theme="dark"][data-seed="teal"], [data-theme="oled"][data-seed="teal"] {
    --md-sys-color-primary: #4CD9D9;
    --md-sys-color-on-primary: #003737;
    --md-sys-color-primary-container: #005050;
    --md-sys-color-on-primary-container: #6FF7F6;
    --md-sys-color-inverse-primary: #006A6A;
    --md-sys-color-secondary-container: #3F4949;
    --md-sys-color-on-secondary-container: #CCE8E7;
}
[data-theme="dark"][data-seed="red"], [data-theme="oled"][data-seed="red"] {
    --md-sys-color-primary: #F2B8B5;
    --md-sys-color-on-primary: #601410;
    --md-sys-color-primary-container: #8C1D18;
    --md-sys-color-on-primary-container: #F9DEDC;
    --md-sys-color-inverse-primary: #B3261E;
    --md-sys-color-secondary-container: #5C403E;
    --md-sys-color-on-secondary-container: #F4DDDB;
}
[data-theme="dark"][data-seed="pink"], [data-theme="oled"][data-seed="pink"] {
    --md-sys-color-primary: #FFB2BE;
    --md-sys-color-on-primary: #650025;
    --md-sys-color-primary-container: #900037;
    --md-sys-color-on-primary-container: #FFD9DE;
    --md-sys-color-inverse-primary: #BC004B;
    --md-sys-color-secondary-container: #49454F; /* Fallback */
    --md-sys-color-on-secondary-container: #E8DEF8;
}
[data-theme="dark"][data-seed="orange"], [data-theme="oled"][data-seed="orange"] {
    --md-sys-color-primary: #FFB870;
    --md-sys-color-on-primary: #4A2800;
    --md-sys-color-primary-container: #693C00;
    --md-sys-color-on-primary-container: #FFDCBE;
    --md-sys-color-inverse-primary: #8B5000;
}
[data-theme="dark"][data-seed="yellow"], [data-theme="oled"][data-seed="yellow"] {
    --md-sys-color-primary: #DEC600;
    --md-sys-color-on-primary: #393000;
    --md-sys-color-primary-container: #524700;
    --md-sys-color-on-primary-container: #FFE24B;
    --md-sys-color-inverse-primary: #6D5E00;
}
[data-theme="dark"][data-seed="cyan"], [data-theme="oled"][data-seed="cyan"] {
    --md-sys-color-primary: #4FD8EB;
    --md-sys-color-on-primary: #00363D;
    --md-sys-color-primary-container: #004F58;
    --md-sys-color-on-primary-container: #97F0FF;
    --md-sys-color-inverse-primary: #0097A7;
}
[data-theme="dark"][data-seed="monochrome"], [data-theme="oled"][data-seed="monochrome"] {
    --md-sys-color-primary: #E8EAED;
    --md-sys-color-primary-rgb: 232, 234, 237;
    --md-sys-color-on-primary: #202124;
    --md-sys-color-primary-container: #3C4043;
    --md-sys-color-on-primary-container: #F1F3F4;
    --md-sys-color-inverse-primary: #5F6368;
    --md-sys-color-secondary-container: #44474F;
    --md-sys-color-on-secondary-container: #C4C7D0;
}

/* --- EXPRESSIVE STYLE OVERRIDES --- */
[data-style="expressive"] {
    --font-family-exp: 'Roboto Flex', sans-serif;
    
    /* Typography Overrides */
    --md-sys-typescale-display-large: 400 64px/72px var(--font-family-exp);
    --md-sys-typescale-display-medium: 400 45px/52px var(--font-family-exp);
    --md-sys-typescale-headline-large: 500 32px/40px var(--font-family-exp);
    --md-sys-typescale-headline-medium: 500 28px/36px var(--font-family-exp);
    --md-sys-typescale-title-large: 400 22px/28px var(--font-family-exp);
    --md-sys-typescale-title-medium: 500 16px/24px var(--font-family-exp);
    --md-sys-typescale-body-large: 400 16px/24px var(--font-family-exp);
    --md-sys-typescale-label-large: 600 14px/20px var(--font-family-exp);

    /* Shape Overrides - Rounder */
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 12px;
    --md-sys-shape-corner-medium: 16px;
    --md-sys-shape-corner-large: 28px;
    --md-sys-shape-corner-xl: 32px;
}


.expressive-text { font-variation-settings: 'wdth' 115; }

/* --- SHAPE OVERRIDES (Must come after :root to override) --- */
[data-radius="small"] {
    --md-sys-shape-corner-extra-small: 2px;
    --md-sys-shape-corner-small: 4px;
    --md-sys-shape-corner-medium: 6px;
    --md-sys-shape-corner-large: 8px;
    --md-sys-shape-corner-extra-large: 12px;
}
[data-radius="large"] {
    --md-sys-shape-corner-extra-small: 8px;
    --md-sys-shape-corner-small: 12px;
    --md-sys-shape-corner-medium: 16px;
    --md-sys-shape-corner-large: 24px;
    --md-sys-shape-corner-extra-large: 32px;
}
[data-radius="full"] {
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 16px;
    --md-sys-shape-corner-medium: 24px;
    --md-sys-shape-corner-large: 32px;
    --md-sys-shape-corner-extra-large: 48px;
}

/* --- OLD MATERIAL (M2) STYLE OVERRIDES --- */
[data-style="m2"] {
    --md-sys-shape-corner-extra-small: 2px;
    --md-sys-shape-corner-small: 4px;
    --md-sys-shape-corner-medium: 4px;
    --md-sys-shape-corner-large: 4px;
    --md-sys-shape-corner-extra-large: 4px;
    --md-sys-shape-corner-full: 4px;
    
    /* M2 Elevation - Sharper/Deeper shadows */
    --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
    --md-sys-elevation-2: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12);
    --md-sys-elevation-3: 0 1px 8px rgba(0,0,0,0.2), 0 3px 4px rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12);
}