/* =========================================
   DYNAMIC MULTI-COLOR THEME SYSTEM
   6 Color Themes: Blue, Green, Red, Yellow, Pink, Purple
   All with consistent light intensity
   ========================================= */

/* Base typography tokens (theme-independent) */
:root {
  --md-sys-typescale-display-large-font-size: 57px;
  --md-sys-typescale-headline-large-font-size: 32px;
  --md-sys-typescale-title-large-font-size: 22px;
  --md-sys-typescale-body-large-font-size: 16px;
  --md-sys-typescale-label-large-font-size: 14px;
}

/* ============= BLUE THEME (Default) ============= */
:root,
[data-color-theme="blue"],
[data-color-theme="blue"][data-theme="light"] {
  --md-sys-color-primary: #1565C0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #BBDEFB;
  --md-sys-color-on-primary-container: #0D47A1;
  
  --md-sys-color-secondary: #42A5F5;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E3F2FD;
  --md-sys-color-on-secondary-container: #0D47A1;
  
  --md-sys-color-surface: #F1F4F8;
  --md-sys-color-on-surface: #1A1C1A;
  --md-sys-color-surface-variant: #DFE3E8;
  --md-sys-color-on-surface-variant: #404349;
  
  --md-sys-color-background: #F8F9FB;
  --md-sys-color-on-background: #1A1C1A;
  
  --md-sys-color-error: #C62828;
  --md-sys-color-on-error: #FFFFFF;
  
  --md-sys-color-outline: #70767D;
  --md-sys-color-shadow: #000000;
  
  /* Elevation shadows */
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(21, 101, 192, 0.15), 0px 1px 3px 1px rgba(21, 101, 192, 0.1);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(21, 101, 192, 0.15), 0px 2px 6px 2px rgba(21, 101, 192, 0.12);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(21, 101, 192, 0.12), 0px 1px 3px 0px rgba(21, 101, 192, 0.15);
}

[data-color-theme="blue"][data-theme="dark"] {
  --md-sys-color-primary: #90CAF9;
  --md-sys-color-on-primary: #003258;
  --md-sys-color-primary-container: #0D47A1;
  --md-sys-color-on-primary-container: #BBDEFB;
  
  --md-sys-color-secondary: #81D4FA;
  --md-sys-color-on-secondary: #01579B;
  --md-sys-color-secondary-container: #1976D2;
  --md-sys-color-on-secondary-container: #E3F2FD;
  
  --md-sys-color-surface: #1A1C1E;
  --md-sys-color-on-surface: #E1E3E5;
  --md-sys-color-surface-variant: #404349;
  --md-sys-color-on-surface-variant: #BFC2C9;
  
  --md-sys-color-background: #121214;
  --md-sys-color-on-background: #E1E3E5;
  
  --md-sys-color-outline: #8A8C93;
  
  --md-sys-elevation-level1: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.4), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* ============= GREEN THEME ============= */
[data-color-theme="green"],
[data-color-theme="green"][data-theme="light"] {
  --md-sys-color-primary: #2E7D32;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #C8E6C9;
  --md-sys-color-on-primary-container: #1B5E20;
  
  --md-sys-color-secondary: #66BB6A;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8F5E9;
  --md-sys-color-on-secondary-container: #1B5E20;
  
  --md-sys-color-surface: #F1F8F4;
  --md-sys-color-on-surface: #1A1C1A;
  --md-sys-color-surface-variant: #DFE8E3;
  --md-sys-color-on-surface-variant: #404943;
  
  --md-sys-color-background: #F8FBF9;
  --md-sys-color-on-background: #1A1C1A;
  
  --md-sys-color-error: #C62828;
  --md-sys-color-on-error: #FFFFFF;
  
  --md-sys-color-outline: #70796F;
  --md-sys-color-shadow: #000000;
  
  /* Elevation shadows */
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(46, 125, 50, 0.15), 0px 1px 3px 1px rgba(46, 125, 50, 0.1);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(46, 125, 50, 0.15), 0px 2px 6px 2px rgba(46, 125, 50, 0.12);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(46, 125, 50, 0.12), 0px 1px 3px 0px rgba(46, 125, 50, 0.15);
}

[data-color-theme="green"][data-theme="dark"] {
  --md-sys-color-primary: #81C784;
  --md-sys-color-on-primary: #003910;
  --md-sys-color-primary-container: #1B5E20;
  --md-sys-color-on-primary-container: #C8E6C9;
  
  --md-sys-color-secondary: #A5D6A7;
  --md-sys-color-on-secondary: #1B5E20;
  --md-sys-color-secondary-container: #2E7D32;
  --md-sys-color-on-secondary-container: #DCEDC8;
  
  --md-sys-color-surface: #1A1C1A;
  --md-sys-color-on-surface: #E1E3E1;
  --md-sys-color-surface-variant: #404943;
  --md-sys-color-on-surface-variant: #BFC9C2;
  
  --md-sys-color-background: #121412;
  --md-sys-color-on-background: #E1E3E1;
  
  --md-sys-color-outline: #8A938C;
  
  --md-sys-elevation-level1: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.4), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* ============= RED THEME ============= */
[data-color-theme="red"],
[data-color-theme="red"][data-theme="light"] {
  --md-sys-color-primary: #C62828;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFCDD2;
  --md-sys-color-on-primary-container: #B71C1C;
  
  --md-sys-color-secondary: #EF5350;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFEBEE;
  --md-sys-color-on-secondary-container: #B71C1C;
  
  --md-sys-color-surface: #F8F1F1;
  --md-sys-color-on-surface: #1A1C1A;
  --md-sys-color-surface-variant: #E8DFDF;
  --md-sys-color-on-surface-variant: #494040;
  
  --md-sys-color-background: #FBF8F8;
  --md-sys-color-on-background: #1A1C1A;
  
  --md-sys-color-error: #C62828;
  --md-sys-color-on-error: #FFFFFF;
  
  --md-sys-color-outline: #7D7070;
  --md-sys-color-shadow: #000000;
  
  /* Elevation shadows */
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(198, 40, 40, 0.15), 0px 1px 3px 1px rgba(198, 40, 40, 0.1);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(198, 40, 40, 0.15), 0px 2px 6px 2px rgba(198, 40, 40, 0.12);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(198, 40, 40, 0.12), 0px 1px 3px 0px rgba(198, 40, 40, 0.15);
}

[data-color-theme="red"][data-theme="dark"] {
  --md-sys-color-primary: #EF9A9A;
  --md-sys-color-on-primary: #5D1414;
  --md-sys-color-primary-container: #B71C1C;
  --md-sys-color-on-primary-container: #FFCDD2;
  
  --md-sys-color-secondary: #FFAB91;
  --md-sys-color-on-secondary: #BF360C;
  --md-sys-color-secondary-container: #D32F2F;
  --md-sys-color-on-secondary-container: #FFEBEE;
  
  --md-sys-color-surface: #1E1A1A;
  --md-sys-color-on-surface: #E5E1E1;
  --md-sys-color-surface-variant: #494040;
  --md-sys-color-on-surface-variant: #C9BFBF;
  
  --md-sys-color-background: #141212;
  --md-sys-color-on-background: #E5E1E1;
  
  --md-sys-color-outline: #938A8A;
  
  --md-sys-elevation-level1: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.4), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* ============= YELLOW THEME ============= */
[data-color-theme="yellow"],
[data-color-theme="yellow"][data-theme="light"] {
  --md-sys-color-primary: #F57F17;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFF9C4;
  --md-sys-color-on-primary-container: #F57F17;
  
  --md-sys-color-secondary: #FBC02D;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFFDE7;
  --md-sys-color-on-secondary-container: #F57F17;
  
  --md-sys-color-surface: #F8F6F1;
  --md-sys-color-on-surface: #1A1C1A;
  --md-sys-color-surface-variant: #E8E5DF;
  --md-sys-color-on-surface-variant: #494740;
  
  --md-sys-color-background: #FBF9F8;
  --md-sys-color-on-background: #1A1C1A;
  
  --md-sys-color-error: #C62828;
  --md-sys-color-on-error: #FFFFFF;
  
  --md-sys-color-outline: #7D7B70;
  --md-sys-color-shadow: #000000;
  
  /* Elevation shadows */
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(245, 127, 23, 0.15), 0px 1px 3px 1px rgba(245, 127, 23, 0.1);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(245, 127, 23, 0.15), 0px 2px 6px 2px rgba(245, 127, 23, 0.12);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(245, 127, 23, 0.12), 0px 1px 3px 0px rgba(245, 127, 23, 0.15);
}

[data-color-theme="yellow"][data-theme="dark"] {
  --md-sys-color-primary: #FFD54F;
  --md-sys-color-on-primary: #5D4E00;
  --md-sys-color-primary-container: #F57F17;
  --md-sys-color-on-primary-container: #FFF9C4;
  
  --md-sys-color-secondary: #FFE082;
  --md-sys-color-on-secondary: #F57F17;
  --md-sys-color-secondary-container: #FBC02D;
  --md-sys-color-on-secondary-container: #FFFDE7;
  
  --md-sys-color-surface: #1E1C1A;
  --md-sys-color-on-surface: #E5E3E1;
  --md-sys-color-surface-variant: #494740;
  --md-sys-color-on-surface-variant: #C9C7BF;
  
  --md-sys-color-background: #141312;
  --md-sys-color-on-background: #E5E3E1;
  
  --md-sys-color-outline: #93918A;
  
  --md-sys-elevation-level1: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.4), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* ============= BROWN THEME ============= */
[data-color-theme="brown"],
[data-color-theme="brown"][data-theme="light"] {
  --md-sys-color-primary: #6D4C41;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D7CCC8;
  --md-sys-color-on-primary-container: #3E2723;
  
  --md-sys-color-secondary: #8D6E63;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #EFEBE9;
  --md-sys-color-on-secondary-container: #3E2723;
  
  --md-sys-color-surface: #F5F1EE;
  --md-sys-color-on-surface: #1A1C1A;
  --md-sys-color-surface-variant: #E3DFDC;
  --md-sys-color-on-surface-variant: #494744;
  
  --md-sys-color-background: #F9F6F4;
  --md-sys-color-on-background: #1A1C1A;
  
  --md-sys-color-error: #C62828;
  --md-sys-color-on-error: #FFFFFF;
  
  --md-sys-color-outline: #79746F;
  --md-sys-color-shadow: #000000;
  
  /* Elevation shadows */
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(109, 76, 65, 0.15), 0px 1px 3px 1px rgba(109, 76, 65, 0.1);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(109, 76, 65, 0.15), 0px 2px 6px 2px rgba(109, 76, 65, 0.12);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(109, 76, 65, 0.12), 0px 1px 3px 0px rgba(109, 76, 65, 0.15);
}

[data-color-theme="brown"][data-theme="dark"] {
  --md-sys-color-primary: #BCAAA4;
  --md-sys-color-on-primary: #2C1B15;
  --md-sys-color-primary-container: #4E342E;
  --md-sys-color-on-primary-container: #D7CCC8;
  
  --md-sys-color-secondary: #A1887F;
  --md-sys-color-on-secondary: #3E2723;
  --md-sys-color-secondary-container: #5D4037;
  --md-sys-color-on-secondary-container: #EFEBE9;
  
  --md-sys-color-surface: #1A1816;
  --md-sys-color-on-surface: #E5E3E1;
  --md-sys-color-surface-variant: #494744;
  --md-sys-color-on-surface-variant: #C9C5C2;
  
  --md-sys-color-background: #141312;
  --md-sys-color-on-background: #E5E3E1;
  
  --md-sys-color-outline: #93908C;
  
  --md-sys-elevation-level1: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.4), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* ============= PURPLE THEME ============= */
[data-color-theme="purple"],
[data-color-theme="purple"][data-theme="light"] {
  --md-sys-color-primary: #6A1B9A;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E1BEE7;
  --md-sys-color-on-primary-container: #4A148C;
  
  --md-sys-color-secondary: #AB47BC;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #F3E5F5;
  --md-sys-color-on-secondary-container: #4A148C;
  
  --md-sys-color-surface: #F4F1F8;
  --md-sys-color-on-surface: #1A1C1A;
  --md-sys-color-surface-variant: #E3DFE8;
  --md-sys-color-on-surface-variant: #434049;
  
  --md-sys-color-background: #F9F8FB;
  --md-sys-color-on-background: #1A1C1A;
  
  --md-sys-color-error: #C62828;
  --md-sys-color-on-error: #FFFFFF;
  
  --md-sys-color-outline: #76707D;
  --md-sys-color-shadow: #000000;
  
  /* Elevation shadows */
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(106, 27, 154, 0.15), 0px 1px 3px 1px rgba(106, 27, 154, 0.1);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(106, 27, 154, 0.15), 0px 2px 6px 2px rgba(106, 27, 154, 0.12);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(106, 27, 154, 0.12), 0px 1px 3px 0px rgba(106, 27, 154, 0.15);
}

[data-color-theme="purple"][data-theme="dark"] {
  --md-sys-color-primary: #CE93D8;
  --md-sys-color-on-primary: #38006B;
  --md-sys-color-primary-container: #4A148C;
  --md-sys-color-on-primary-container: #E1BEE7;
  
  --md-sys-color-secondary: #E1BEE7;
  --md-sys-color-on-secondary: #4A148C;
  --md-sys-color-secondary-container: #6A1B9A;
  --md-sys-color-on-secondary-container: #F3E5F5;
  
  --md-sys-color-surface: #1C1A1E;
  --md-sys-color-on-surface: #E3E1E5;
  --md-sys-color-surface-variant: #434049;
  --md-sys-color-on-surface-variant: #C7BFC9;
  
  --md-sys-color-background: #131214;
  --md-sys-color-on-background: #E3E1E5;
  
  --md-sys-color-outline: #918A93;
  
  --md-sys-elevation-level1: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.4), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* ============= DARK THEME OVERRIDES (Theme-independent) ============= */
[data-theme="dark"] {
  --md-sys-color-error: #EF5350;
  --md-sys-color-on-error: #5D1414;
  --md-sys-color-shadow: #000000;
}