/* ========== CARD COLOR OVERRIDES ========== */
/* This file allows individual cards to have different color schemes while respecting the global dark mode */

/* Lavender Cards (Light Mode) */
.content-card[data-color="lavender"] {
    --md-sys-color-primary: #6A46C4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #E9DDFF;
    --md-sys-color-on-primary-container: #22005D;
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1E192B;
    --md-sys-color-surface-container-low: #F7F2FA;
    --md-sys-color-on-surface-variant: #49454F;
}

/* Lavender Cards (Dark Mode) */
:root[data-mode="dark"] .content-card[data-color="lavender"] {
    --md-sys-color-primary: #CFBCFF;
    --md-sys-color-on-primary: #3A0693;
    --md-sys-color-primary-container: #5128AA;
    --md-sys-color-on-primary-container: #E9DDFF;
    --md-sys-color-secondary: #CCC2DC;
    --md-sys-color-on-secondary: #332D41;
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;
    --md-sys-color-surface-container-low: #1C1B1F;
    --md-sys-color-on-surface-variant: #CAC4D0;
}

/* Python Cards (Light Mode) */
.content-card[data-color="python"] {
    --md-sys-color-primary: #FFD600;
    --md-sys-color-on-primary: #000000;
    --md-sys-color-primary-container: #FFF9C4;
    --md-sys-color-on-primary-container: #212121;
    --md-sys-color-secondary: #FFECB3;
    --md-sys-color-on-secondary: #000000;
    --md-sys-color-secondary-container: #FFF8E1;
    --md-sys-color-on-secondary-container: #212121;
    --md-sys-color-surface-container-low: #FFF9C4;
    --md-sys-color-on-surface-variant: #4B4B4B;
}

/* Python Cards (Dark Mode) */
:root[data-mode="dark"] .content-card[data-color="python"] {
    --md-sys-color-primary: #FFD600;
    --md-sys-color-on-primary: #000000;
    --md-sys-color-primary-container: #FBC02D;
    --md-sys-color-on-primary-container: #000000;
    --md-sys-color-secondary: #FFCA28;
    --md-sys-color-on-secondary: #000000;
    --md-sys-color-secondary-container: #FFB300;
    --md-sys-color-on-secondary-container: #000000;
    --md-sys-color-surface-container-low: #1E1E1E;
    --md-sys-color-on-surface-variant: #C4C4C4;
}

/* Sage Cards (Light Mode) */
.content-card[data-color="sage"] {
    --md-sys-color-primary: #4A7A75;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #C8E6C9;
    --md-sys-color-on-primary-container: #00201A;
    --md-sys-color-secondary: #5C8C87;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #DAEBE8;
    --md-sys-color-on-secondary-container: #00201D;
    --md-sys-color-surface-container-low: #EFF5F4;
    --md-sys-color-on-surface-variant: #3F4947;
}

/* Sage Cards (Dark Mode) */
:root[data-mode="dark"] .content-card[data-color="sage"] {
    --md-sys-color-primary: #81C784;
    --md-sys-color-on-primary: #003300;
    --md-sys-color-primary-container: #2E7D32;
    --md-sys-color-on-primary-container: #A5D6A7;
    --md-sys-color-secondary: #A5D6A7;
    --md-sys-color-on-secondary: #003300;
    --md-sys-color-secondary-container: #388E3C;
    --md-sys-color-on-secondary-container: #C8E6C9;
    --md-sys-color-surface-container-low: #1E1E1E;
    --md-sys-color-on-surface-variant: #AED581;
}

/* Bubblegum Cards (Light Mode) */
.content-card[data-color="bubblegum"] {
    --md-sys-color-primary: #E91E63;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #F8BBD0;
    --md-sys-color-on-primary-container: #880E4F;
    --md-sys-color-secondary: #EC407A;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #F48FB1;
    --md-sys-color-on-secondary-container: #880E4F;
    --md-sys-color-surface-container-low: #FCE4EC;
    --md-sys-color-on-surface-variant: #880E4F;
}

/* Bubblegum Cards (Dark Mode) */
:root[data-mode="dark"] .content-card[data-color="bubblegum"] {
    --md-sys-color-primary: #F48FB1;
    --md-sys-color-on-primary: #880E4F;
    --md-sys-color-primary-container: #C2185B;
    --md-sys-color-on-primary-container: #F8BBD0;
    --md-sys-color-secondary: #F06292;
    --md-sys-color-on-secondary: #880E4F;
    --md-sys-color-secondary-container: #D81B60;
    --md-sys-color-on-secondary-container: #F48FB1;
    --md-sys-color-surface-container-low: #1E1E1E;
    --md-sys-color-on-surface-variant: #F48FB1;
}

/* Ocean Cards (Light Mode) */
.content-card[data-color="ocean"] {
    --md-sys-color-primary: #0D47A1;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #BBDEFB;
    --md-sys-color-on-primary-container: #002171;
    --md-sys-color-secondary: #1565C0;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #90CAF9;
    --md-sys-color-on-secondary-container: #002171;
    --md-sys-color-surface-container-low: #E8F3FF;
    --md-sys-color-on-surface-variant: #0D47A1;
}

/* Ocean Cards (Dark Mode) */
:root[data-mode="dark"] .content-card[data-color="ocean"] {
    --md-sys-color-primary: #90CAF9;
    --md-sys-color-on-primary: #0D47A1;
    --md-sys-color-primary-container: #1565C0;
    --md-sys-color-on-primary-container: #BBDEFB;
    --md-sys-color-secondary: #64B5F6;
    --md-sys-color-on-secondary: #0D47A1;
    --md-sys-color-secondary-container: #1976D2;
    --md-sys-color-on-secondary-container: #90CAF9;
    --md-sys-color-surface-container-low: #1A1C20;
    --md-sys-color-on-surface-variant: #90CAF9;
}

/* Boring Cards (Light Mode) */
.content-card[data-color="boring"] {
    --md-sys-color-primary: #000000;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #E0E0E0;
    --md-sys-color-on-primary-container: #000000;
    --md-sys-color-secondary: #404040;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #F0F0F0;
    --md-sys-color-on-secondary-container: #000000;
    --md-sys-color-surface-container-low: #F5F5F5;
    --md-sys-color-on-surface-variant: #000000;
}

/* Boring Cards (Dark Mode) */
:root[data-mode="dark"] .content-card[data-color="boring"] {
    --md-sys-color-primary: #FFFFFF;
    --md-sys-color-on-primary: #000000;
    --md-sys-color-primary-container: #424242;
    --md-sys-color-on-primary-container: #FFFFFF;
    --md-sys-color-secondary: #E0E0E0;
    --md-sys-color-on-secondary: #000000;
    --md-sys-color-secondary-container: #616161;
    --md-sys-color-on-secondary-container: #FFFFFF;
    --md-sys-color-surface-container-low: #121212;
    --md-sys-color-on-surface-variant: #FFFFFF;
}