/* === Système de design ShaarIt - 16 Thèmes === */

/* Typographie globale (s'applique à tous) */
:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
}

/* 1. DEFAULT (ShaarIt) - DARK (Par défaut si pas de light) */
:root, :root[data-theme-id="DEFAULT"] {
  --primary: #00D4AA;
  --primary-hover: #00B894;
  --primary-light: rgba(0, 212, 170, 0.15);
  --on-primary: #0A1628;
  --primary-container: #243447;
  --on-primary-container: #4EECC4;
  
  --secondary: #0EA5E9;
  --on-secondary: #0A1628;
  --secondary-container: #2A3F54;
  --on-secondary-container: #38BDF8;
  
  --tertiary: #4EECC4;
  --on-tertiary: #0A1628;
  
  --background: #0A1628;
  --on-background: #E2E8F0;
  --bg-body: #0A1628;
  --bg-sidebar: #0D1B2A;
  --bg-card: #0D1B2A;
  --bg-card-hover: #1B2838;
  
  --surface: #0D1B2A;
  --on-surface: #E2E8F0;
  --text-main: #E2E8F0;
  --text-secondary: #B0B8C4;
  --text-muted: #94A3B8;
  
  --surface-variant: #1B2838;
  --on-surface-variant: #94A3B8;
  
  --outline: #64748B;
  --outline-variant: #2A3F54;
  --border: #1B2838;
  --border-light: #0D1B2A;
  
  --error: #EF4444;
  --on-error: #FFFFFF;
  --error-container: #450A0A;
  --on-error-container: #FCA5A5;
  
  --header-bg: #0D1B2A;
  --header-text: #E2E8F0;
  
  --tag-bg: #243447;
  --tag-text: #4EECC4;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #6EE7B7;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FCA5A5;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FCD34D;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(0, 212, 170, 0.25);
  --selection-border: #00D4AA;
}

/* 1. DEFAULT (ShaarIt) - LIGHT */
:root[data-theme="light"][data-theme-id="DEFAULT"] {
  --primary: #006B5A;
  --primary-hover: #005247;
  --primary-light: rgba(0, 107, 90, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #B2F5E6;
  --on-primary-container: #00201A;
  
  --secondary: #0077B6;
  --on-secondary: #FFFFFF;
  --secondary-container: #D0E8FF;
  --on-secondary-container: #001E36;
  
  --tertiary: #00897B;
  --on-tertiary: #FFFFFF;
  
  --background: #F8FAFA;
  --on-background: #1A1C1E;
  --bg-body: #F8FAFA;
  --bg-sidebar: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F9FAFB;
  
  --surface: #FFFFFF;
  --on-surface: #1A1C1E;
  --text-main: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  
  --surface-variant: #E7F0EE;
  --on-surface-variant: #404944;
  
  --outline: #707974;
  --outline-variant: #C0C9C4;
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  
  --error: #BA1A1A;
  --on-error: #FFFFFF;
  --error-container: #FFDAD6;
  --on-error-container: #410002;
  
  --header-bg: #006B5A;
  --header-text: #FFFFFF;
  
  --tag-bg: #E0E7FF;
  --tag-text: #4338CA;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(0, 107, 90, 0.15);
  --selection-border: #006B5A;
}

/* 2. GITHUB - DARK */
:root[data-theme-id="GITHUB"] {
  --primary: #58A6FF;
  --primary-hover: #3B82F6;
  --primary-light: rgba(88, 166, 255, 0.15);
  --on-primary: #0D1117;
  --primary-container: #1F2937;
  --on-primary-container: #79C0FF;
  
  --secondary: #3FB950;
  --on-secondary: #0D1117;
  --secondary-container: #1C2D22;
  --on-secondary-container: #56D364;
  
  --tertiary: #D2A8FF;
  --on-tertiary: #0D1117;
  
  --background: #0D1117;
  --on-background: #C9D1D9;
  --bg-body: #0D1117;
  --bg-sidebar: #161B22;
  --bg-card: #161B22;
  --bg-card-hover: #21262D;
  
  --surface: #161B22;
  --on-surface: #C9D1D9;
  --text-main: #C9D1D9;
  --text-secondary: #8B949E;
  --text-muted: #6E7681;
  
  --surface-variant: #21262D;
  --on-surface-variant: #8B949E;
  
  --outline: #30363D;
  --outline-variant: #21262D;
  --border: #21262D;
  --border-light: #161B22;
  
  --error: #F85149;
  --on-error: #FFFFFF;
  --error-container: #490202;
  --on-error-container: #FFA198;
  
  --header-bg: #161B22;
  --header-text: #C9D1D9;
  
  --tag-bg: #1C2D22;
  --tag-text: #56D364;
  --tag-green-bg: #1C2D22;
  --tag-green-text: #56D364;
  --tag-red-bg: #490202;
  --tag-red-text: #FFA198;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FCD34D;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(88, 166, 255, 0.25);
  --selection-border: #58A6FF;
}

/* 2. GITHUB - LIGHT */
:root[data-theme="light"][data-theme-id="GITHUB"] {
  --primary: #0969DA;
  --primary-hover: #0860CA;
  --primary-light: rgba(9, 105, 218, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #DDF4FF;
  --on-primary-container: #0A3069;
  
  --secondary: #1A7F37;
  --on-secondary: #FFFFFF;
  --secondary-container: #DAFBE1;
  --on-secondary-container: #0E4F1F;
  
  --tertiary: #8250DF;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #1F2328;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F6F8FA;
  --bg-card: #F6F8FA;
  --bg-card-hover: #EAEEF2;
  
  --surface: #F6F8FA;
  --on-surface: #1F2328;
  --text-main: #1F2328;
  --text-secondary: #656D76;
  --text-muted: #8C959F;
  
  --surface-variant: #EAEEF2;
  --on-surface-variant: #656D76;
  
  --outline: #D0D7DE;
  --outline-variant: #E1E4E8;
  --border: #D0D7DE;
  --border-light: #EAEEF2;
  
  --error: #CF222E;
  --on-error: #FFFFFF;
  --error-container: #FFEBE9;
  --on-error-container: #82071E;
  
  --header-bg: #0969DA;
  --header-text: #FFFFFF;
  
  --tag-bg: #DDF4FF;
  --tag-text: #0969DA;
  --tag-green-bg: #DAFBE1;
  --tag-green-text: #1A7F37;
  --tag-red-bg: #FFEBE9;
  --tag-red-text: #CF222E;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(9, 105, 218, 0.15);
  --selection-border: #0969DA;
}

/* 3. LINEAR - DARK */
:root[data-theme-id="LINEAR"] {
  --primary: #5E6AD2;
  --primary-hover: #4F5AC0;
  --primary-light: rgba(94, 106, 210, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #2A2B3D;
  --on-primary-container: #8B8FE8;
  
  --secondary: #4EA7FC;
  --on-secondary: #12131A;
  --secondary-container: #1E2A3A;
  --on-secondary-container: #7DC4FF;
  
  --tertiary: #E8A861;
  --on-tertiary: #12131A;
  
  --background: #12131A;
  --on-background: #EEEFF2;
  --bg-body: #12131A;
  --bg-sidebar: #1B1C24;
  --bg-card: #1B1C24;
  --bg-card-hover: #22232E;
  
  --surface: #1B1C24;
  --on-surface: #EEEFF2;
  --text-main: #EEEFF2;
  --text-secondary: #A0A5B0;
  --text-muted: #8A8F98;
  
  --surface-variant: #22232E;
  --on-surface-variant: #8A8F98;
  
  --outline: #3B3D4A;
  --outline-variant: #2A2B3D;
  --border: #22232E;
  --border-light: #1B1C24;
  
  --error: #EB5757;
  --on-error: #FFFFFF;
  --error-container: #3D1515;
  --on-error-container: #FF9B9B;
  
  --header-bg: #1B1C24;
  --header-text: #EEEFF2;
  
  --tag-bg: #2A2B3D;
  --tag-text: #8B8FE8;
  --tag-green-bg: #1E2A1E;
  --tag-green-text: #7DC4FF;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FF9B9B;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FCD34D;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(94, 106, 210, 0.25);
  --selection-border: #5E6AD2;
}

/* 4. SPOTIFY - DARK */
:root[data-theme-id="SPOTIFY"] {
  --primary: #1DB954;
  --primary-hover: #1aa34a;
  --primary-light: rgba(29, 185, 84, 0.15);
  --on-primary: #000000;
  --primary-container: #1A3D27;
  --on-primary-container: #1ED760;
  
  --secondary: #1DB954;
  --on-secondary: #000000;
  
  --tertiary: #B3B3B3;
  --on-tertiary: #000000;
  
  --background: #000000;
  --on-background: #FFFFFF;
  --bg-body: #000000;
  --bg-sidebar: #121212;
  --bg-card: #121212;
  --bg-card-hover: #1A1A1A;
  
  --surface: #121212;
  --on-surface: #FFFFFF;
  --text-main: #FFFFFF;
  --text-secondary: #B3B3B3;
  --text-muted: #999999;
  
  --surface-variant: #1A1A1A;
  --on-surface-variant: #B3B3B3;
  
  --outline: #333333;
  --outline-variant: #282828;
  --border: #1A1A1A;
  --border-light: #121212;
  
  --error: #E22134;
  
  --header-bg: #121212;
  --header-text: #FFFFFF;
  
  --tag-bg: #1A3D27;
  --tag-text: #1ED760;
  --tag-green-bg: #1A3D27;
  --tag-green-text: #1ED760;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FCA5A5;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FCD34D;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(29, 185, 84, 0.25);
  --selection-border: #1DB954;
}

/* 5. NOTION - DARK */
:root[data-theme-id="NOTION"] {
  --primary: #529CCA;
  --primary-hover: #4488BB;
  --primary-light: rgba(82, 156, 202, 0.15);
  --on-primary: #191919;
  
  --secondary: #E07A5F;
  --on-secondary: #191919;
  
  --tertiary: #81B29A;
  --on-tertiary: #191919;
  
  --background: #191919;
  --on-background: #E0E0E0;
  --bg-body: #191919;
  --bg-sidebar: #202020;
  --bg-card: #202020;
  --bg-card-hover: #2B2B2B;
  
  --surface: #202020;
  --on-surface: #E0E0E0;
  --text-main: #E0E0E0;
  --text-secondary: #B0B0B0;
  --text-muted: #9B9B9B;
  
  --surface-variant: #2B2B2B;
  --on-surface-variant: #9B9B9B;
  
  --outline: #3E3E3E;
  --outline-variant: #2B2B2B;
  --border: #2B2B2B;
  --border-light: #202020;
  
  --error: #EF4444;
  
  --header-bg: #202020;
  --header-text: #E0E0E0;
  
  --tag-bg: #2B2B2B;
  --tag-text: #81B29A;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #6EE7B7;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FCA5A5;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FCD34D;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(82, 156, 202, 0.25);
  --selection-border: #529CCA;
}

/* 6. DISCORD - DARK */
:root[data-theme-id="DISCORD"] {
  --primary: #5865F2;
  --primary-hover: #4752C4;
  --primary-light: rgba(88, 101, 242, 0.15);
  --on-primary: #FFFFFF;
  
  --secondary: #57F287;
  --on-secondary: #1E2124;
  
  --tertiary: #FEE75C;
  --on-tertiary: #1E2124;
  
  --background: #313338;
  --on-background: #DBDEE1;
  --bg-body: #313338;
  --bg-sidebar: #2B2D31;
  --bg-card: #2B2D31;
  --bg-card-hover: #383A40;
  
  --surface: #2B2D31;
  --on-surface: #DBDEE1;
  --text-main: #DBDEE1;
  --text-secondary: #949BA4;
  --text-muted: #B5BAC1;
  
  --surface-variant: #383A40;
  --on-surface-variant: #B5BAC1;
  
  --outline: #4E5058;
  --outline-variant: #383A40;
  --border: #383A40;
  --border-light: #2B2D31;
  
  --error: #ED4245;
  
  --header-bg: #2B2D31;
  --header-text: #DBDEE1;
  
  --tag-bg: #383A40;
  --tag-text: #57F287;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #6EE7B7;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FCA5A5;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FCD34D;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(88, 101, 242, 0.25);
  --selection-border: #5865F2;
}

/* 7. DRACULA - DARK */
:root[data-theme-id="DRACULA"] {
  --primary: #BD93F9;
  --primary-hover: #A878E8;
  --primary-light: rgba(189, 147, 249, 0.15);
  --on-primary: #21222C;
  
  --secondary: #50FA7B;
  --on-secondary: #21222C;
  
  --tertiary: #FF79C6;
  --on-tertiary: #21222C;
  
  --background: #282A36;
  --on-background: #F8F8F2;
  --bg-body: #282A36;
  --bg-sidebar: #21222C;
  --bg-card: #21222C;
  --bg-card-hover: #343746;
  
  --surface: #21222C;
  --on-surface: #F8F8F2;
  --text-main: #F8F8F2;
  --text-secondary: #D0D0D0;
  --text-muted: #BFBFBF;
  
  --surface-variant: #343746;
  --on-surface-variant: #BFBFBF;
  
  --outline: #6272A4;
  --outline-variant: #343746;
  --border: #343746;
  --border-light: #21222C;
  
  --error: #FF5555;
  
  --header-bg: #21222C;
  --header-text: #F8F8F2;
  
  --tag-bg: #343746;
  --tag-text: #BD93F9;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #50FA7B;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FF79C6;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #F1FA8C;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(189, 147, 249, 0.25);
  --selection-border: #BD93F9;
}

/* 8. ONE DARK PRO - DARK */
:root[data-theme-id="ONE_DARK_PRO"] {
  --primary: #61AFEF;
  --primary-hover: #4A9FDF;
  --primary-light: rgba(97, 175, 239, 0.15);
  --on-primary: #1E2127;
  
  --secondary: #98C379;
  --on-secondary: #1E2127;
  
  --tertiary: #E5C07B;
  --on-tertiary: #1E2127;
  
  --background: #282C34;
  --on-background: #ABB2BF;
  --bg-body: #282C34;
  --bg-sidebar: #21252B;
  --bg-card: #21252B;
  --bg-card-hover: #2C313A;
  
  --surface: #21252B;
  --on-surface: #ABB2BF;
  --text-main: #ABB2BF;
  --text-secondary: #9BA0A8;
  --text-muted: #8B929E;
  
  --surface-variant: #2C313A;
  --on-surface-variant: #8B929E;
  
  --outline: #3E4452;
  --outline-variant: #2C313A;
  --border: #2C313A;
  --border-light: #21252B;
  
  --error: #E06C75;
  
  --header-bg: #21252B;
  --header-text: #ABB2BF;
  
  --tag-bg: #2C313A;
  --tag-text: #61AFEF;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #98C379;
  --tag-red-bg: #3D1515;
  --tag-red-text: #E06C75;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #E5C07B;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(97, 175, 239, 0.25);
  --selection-border: #61AFEF;
}

/* 9. TOKYO NIGHT - DARK */
:root[data-theme-id="TOKYO_NIGHT"] {
  --primary: #7AA2F7;
  --primary-hover: #6A92E7;
  --primary-light: rgba(122, 162, 247, 0.15);
  --on-primary: #1A1B26;
  
  --secondary: #9ECE6A;
  --on-secondary: #1A1B26;
  
  --tertiary: #BB9AF7;
  --on-tertiary: #1A1B26;
  
  --background: #1A1B26;
  --on-background: #C0CAF5;
  --bg-body: #1A1B26;
  --bg-sidebar: #16171F;
  --bg-card: #16171F;
  --bg-card-hover: #24283B;
  
  --surface: #16171F;
  --on-surface: #C0CAF5;
  --text-main: #C0CAF5;
  --text-secondary: #A9B1D6;
  --text-muted: #9AA5CE;
  
  --surface-variant: #24283B;
  --on-surface-variant: #9AA5CE;
  
  --outline: #3B4261;
  --outline-variant: #24283B;
  --border: #24283B;
  --border-light: #16171F;
  
  --error: #F7768E;
  
  --header-bg: #16171F;
  --header-text: #C0CAF5;
  
  --tag-bg: #24283B;
  --tag-text: #7AA2F7;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #9ECE6A;
  --tag-red-bg: #3D1515;
  --tag-red-text: #F7768E;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #E0AF68;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(122, 162, 247, 0.25);
  --selection-border: #7AA2F7;
}

/* 10. NORD - DARK */
:root[data-theme-id="NORD"] {
  --primary: #88C0D0;
  --primary-hover: #7AB0C0;
  --primary-light: rgba(136, 192, 208, 0.15);
  --on-primary: #2E3440;
  
  --secondary: #A3BE8C;
  --on-secondary: #2E3440;
  
  --tertiary: #EBCB8B;
  --on-tertiary: #2E3440;
  
  --background: #2E3440;
  --on-background: #ECEFF4;
  --bg-body: #2E3440;
  --bg-sidebar: #3B4252;
  --bg-card: #3B4252;
  --bg-card-hover: #434C5E;
  
  --surface: #3B4252;
  --on-surface: #D8DEE9;
  --text-main: #ECEFF4;
  --text-secondary: #D8DEE9;
  --text-muted: #D8DEE9;
  
  --surface-variant: #434C5E;
  --on-surface-variant: #D8DEE9;
  
  --outline: #4C566A;
  --outline-variant: #434C5E;
  --border: #434C5E;
  --border-light: #3B4252;
  
  --error: #BF616A;
  
  --header-bg: #3B4252;
  --header-text: #ECEFF4;
  
  --tag-bg: #434C5E;
  --tag-text: #88C0D0;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #A3BE8C;
  --tag-red-bg: #3D1515;
  --tag-red-text: #BF616A;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #EBCB8B;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(136, 192, 208, 0.25);
  --selection-border: #88C0D0;
}

/* 11. NIGHT OWL - DARK */
:root[data-theme-id="NIGHT_OWL"] {
  --primary: #7FDBCA;
  --primary-hover: #6FCBBA;
  --primary-light: rgba(127, 219, 202, 0.15);
  --on-primary: #011627;
  
  --secondary: #ADDB67;
  --on-secondary: #011627;
  
  --tertiary: #C792EA;
  --on-tertiary: #011627;
  
  --background: #011627;
  --on-background: #D6DEEB;
  --bg-body: #011627;
  --bg-sidebar: #0B2942;
  --bg-card: #0B2942;
  --bg-card-hover: #112B45;
  
  --surface: #0B2942;
  --on-surface: #D6DEEB;
  --text-main: #D6DEEB;
  --text-secondary: #B8C5D6;
  --text-muted: #9FAFC2;
  
  --surface-variant: #112B45;
  --on-surface-variant: #9FAFC2;
  
  --outline: #1D3B58;
  --outline-variant: #112B45;
  --border: #112B45;
  --border-light: #0B2942;
  
  --error: #EF5350;
  
  --header-bg: #0B2942;
  --header-text: #D6DEEB;
  
  --tag-bg: #112B45;
  --tag-text: #7FDBCA;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #ADDB67;
  --tag-red-bg: #3D1515;
  --tag-red-text: #EF5350;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FCD34D;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(127, 219, 202, 0.25);
  --selection-border: #7FDBCA;
}

/* 12. ANTHRACITE - DARK */
:root[data-theme-id="ANTHRACITE"] {
  --primary: #BB86FC;
  --primary-hover: #AA75EB;
  --primary-light: rgba(187, 134, 252, 0.15);
  --on-primary: #121212;
  
  --secondary: #03DAC6;
  --on-secondary: #121212;
  
  --tertiary: #CF6679;
  --on-tertiary: #121212;
  
  --background: #121212;
  --on-background: #E1E1E1;
  --bg-body: #121212;
  --bg-sidebar: #1E1E1E;
  --bg-card: #1E1E1E;
  --bg-card-hover: #2C2C2C;
  
  --surface: #1E1E1E;
  --on-surface: #E1E1E1;
  --text-main: #E1E1E1;
  --text-secondary: #C0C0C0;
  --text-muted: #AAAAAA;
  
  --surface-variant: #2C2C2C;
  --on-surface-variant: #AAAAAA;
  
  --outline: #3D3D3D;
  --outline-variant: #2C2C2C;
  --border: #2C2C2C;
  --border-light: #1E1E1E;
  
  --error: #CF6679;
  
  --header-bg: #1E1E1E;
  --header-text: #E1E1E1;
  
  --tag-bg: #2C2C2C;
  --tag-text: #BB86FC;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #03DAC6;
  --tag-red-bg: #3D1515;
  --tag-red-text: #CF6679;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FCD34D;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(187, 134, 252, 0.25);
  --selection-border: #BB86FC;
}

/* 13. CYBERPUNK - DARK */
:root[data-theme-id="CYBERPUNK"] {
  --primary: #00FFFF;
  --primary-hover: #00DDDD;
  --primary-light: rgba(0, 255, 255, 0.15);
  --on-primary: #0A0A14;
  
  --secondary: #FF00FF;
  --on-secondary: #0A0A14;
  
  --tertiary: #FFFF00;
  --on-tertiary: #0A0A14;
  
  --background: #0A0A14;
  --on-background: #E0E0F0;
  --bg-body: #0A0A14;
  --bg-sidebar: #12121E;
  --bg-card: #12121E;
  --bg-card-hover: #1A1A2E;
  
  --surface: #12121E;
  --on-surface: #E0E0F0;
  --text-main: #E0E0F0;
  --text-secondary: #C0C0D0;
  --text-muted: #A0A0C0;
  
  --surface-variant: #1A1A2E;
  --on-surface-variant: #A0A0C0;
  
  --outline: #2A2A44;
  --outline-variant: #1A1A2E;
  --border: #1A1A2E;
  --border-light: #12121E;
  
  --error: #FF0055;
  
  --header-bg: #12121E;
  --header-text: #E0E0F0;
  
  --tag-bg: #1A1A2E;
  --tag-text: #00FFFF;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #00FF00;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FF0055;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #FFFF00;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(0, 255, 255, 0.25);
  --selection-border: #00FFFF;
}

/* 14. NAVY ELEGANCE - DARK */
:root[data-theme-id="NAVY_ELEGANCE"] {
  --primary: #D4AF37;
  --primary-hover: #C49F27;
  --primary-light: rgba(212, 175, 55, 0.15);
  --on-primary: #0B1929;
  
  --secondary: #C0C0C0;
  --on-secondary: #0B1929;
  
  --tertiary: #87CEEB;
  --on-tertiary: #0B1929;
  
  --background: #0B1929;
  --on-background: #E0E4EA;
  --bg-body: #0B1929;
  --bg-sidebar: #0F2035;
  --bg-card: #0F2035;
  --bg-card-hover: #162A42;
  
  --surface: #0F2035;
  --on-surface: #E0E4EA;
  --text-main: #E0E4EA;
  --text-secondary: #B8BFCC;
  --text-muted: #A0AABB;
  
  --surface-variant: #162A42;
  --on-surface-variant: #A0AABB;
  
  --outline: #1E3550;
  --outline-variant: #162A42;
  --border: #162A42;
  --border-light: #0F2035;
  
  --error: #EF4444;
  
  --header-bg: #0F2035;
  --header-text: #E0E4EA;
  
  --tag-bg: #162A42;
  --tag-text: #D4AF37;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #87CEEB;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FCA5A5;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #D4AF37;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(212, 175, 55, 0.25);
  --selection-border: #D4AF37;
}

/* 15. EARTHY - DARK */
:root[data-theme-id="EARTHY"] {
  --primary: #81C784;
  --primary-hover: #71B774;
  --primary-light: rgba(129, 199, 132, 0.15);
  --on-primary: #1A1510;
  
  --secondary: #D4A574;
  --on-secondary: #1A1510;
  
  --tertiary: #A5D6A7;
  --on-tertiary: #1A1510;
  
  --background: #1A1510;
  --on-background: #E0D8CF;
  --bg-body: #1A1510;
  --bg-sidebar: #231E18;
  --bg-card: #231E18;
  --bg-card-hover: #2E2720;
  
  --surface: #231E18;
  --on-surface: #E0D8CF;
  --text-main: #E0D8CF;
  --text-secondary: #C8BFB6;
  --text-muted: #ADA49A;
  
  --surface-variant: #2E2720;
  --on-surface-variant: #ADA49A;
  
  --outline: #3D342B;
  --outline-variant: #2E2720;
  --border: #2E2720;
  --border-light: #231E18;
  
  --error: #EF4444;
  
  --header-bg: #231E18;
  --header-text: #E0D8CF;
  
  --tag-bg: #2E2720;
  --tag-text: #81C784;
  --tag-green-bg: #1B3D2A;
  --tag-green-text: #A5D6A7;
  --tag-red-bg: #3D1515;
  --tag-red-text: #FCA5A5;
  --tag-yellow-bg: #3D2A15;
  --tag-yellow-text: #D4A574;
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --selection-bg: rgba(129, 199, 132, 0.25);
  --selection-border: #81C784;
}

/* 3. LINEAR - LIGHT */
:root[data-theme="light"][data-theme-id="LINEAR"] {
  --primary: #3B3D4A;
  --primary-hover: #2A2B3D;
  --primary-light: rgba(59, 61, 74, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #E8EAFF;
  --on-primary-container: #1A1C2A;
  
  --secondary: #1E5A96;
  --on-secondary: #FFFFFF;
  --secondary-container: #D0E4FF;
  --on-secondary-container: #001D3A;
  
  --tertiary: #B8860B;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #12131A;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F7;
  --bg-card: #F5F5F7;
  --bg-card-hover: #EEEFF2;
  
  --surface: #F5F5F7;
  --on-surface: #12131A;
  --text-main: #12131A;
  --text-secondary: #5A5C68;
  --text-muted: #8A8F98;
  
  --surface-variant: #EEEFF2;
  --on-surface-variant: #5A5C68;
  
  --outline: #8A8F98;
  --outline-variant: #D0D1D9;
  --border: #D0D1D9;
  --border-light: #EEEFF2;
  
  --error: #EB5757;
  
  --header-bg: #3B3D4A;
  --header-text: #FFFFFF;
  
  --tag-bg: #E8EAFF;
  --tag-text: #3B3D4A;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(59, 61, 74, 0.15);
  --selection-border: #3B3D4A;
}

/* 4. SPOTIFY - LIGHT */
:root[data-theme="light"][data-theme-id="SPOTIFY"] {
  --primary: #1DB954;
  --primary-hover: #1aa34a;
  --primary-light: rgba(29, 185, 84, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #D1FAE5;
  --on-primary-container: #0A2A15;
  
  --secondary: #1DB954;
  --on-secondary: #FFFFFF;
  
  --tertiary: #B3B3B3;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #191919;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #191919;
  --text-main: #191919;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #E22134;
  
  --header-bg: #1DB954;
  --header-text: #FFFFFF;
  
  --tag-bg: #D1FAE5;
  --tag-text: #1DB954;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #1DB954;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(29, 185, 84, 0.15);
  --selection-border: #1DB954;
}

/* 5. NOTION - LIGHT */
:root[data-theme="light"][data-theme-id="NOTION"] {
  --primary: #529CCA;
  --primary-hover: #4488BB;
  --primary-light: rgba(82, 156, 202, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #D0E8FF;
  --on-primary-container: #001E36;
  
  --secondary: #E07A5F;
  --on-secondary: #FFFFFF;
  
  --tertiary: #81B29A;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #191919;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #191919;
  --text-main: #191919;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #EF4444;
  
  --header-bg: #529CCA;
  --header-text: #FFFFFF;
  
  --tag-bg: #D0E8FF;
  --tag-text: #529CCA;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(82, 156, 202, 0.15);
  --selection-border: #529CCA;
}

/* 6. DISCORD - LIGHT */
:root[data-theme="light"][data-theme-id="DISCORD"] {
  --primary: #5865F2;
  --primary-hover: #4752C4;
  --primary-light: rgba(88, 101, 242, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #DDF4FF;
  --on-primary-container: #001D3A;
  
  --secondary: #57F287;
  --on-secondary: #FFFFFF;
  
  --tertiary: #FEE75C;
  --on-tertiary: #1E2124;
  
  --background: #FFFFFF;
  --on-background: #1E2124;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #1E2124;
  --text-main: #1E2124;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #ED4245;
  
  --header-bg: #5865F2;
  --header-text: #FFFFFF;
  
  --tag-bg: #DDF4FF;
  --tag-text: #5865F2;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(88, 101, 242, 0.15);
  --selection-border: #5865F2;
}

/* 7. DRACULA - LIGHT */
:root[data-theme="light"][data-theme-id="DRACULA"] {
  --primary: #BD93F9;
  --primary-hover: #A878E8;
  --primary-light: rgba(189, 147, 249, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #E8D5FF;
  --on-primary-container: #2A0A4A;
  
  --secondary: #50FA7B;
  --on-secondary: #FFFFFF;
  
  --tertiary: #FF79C6;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #21222C;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #21222C;
  --text-main: #21222C;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #FF5555;
  
  --header-bg: #BD93F9;
  --header-text: #FFFFFF;
  
  --tag-bg: #E8D5FF;
  --tag-text: #BD93F9;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(189, 147, 249, 0.15);
  --selection-border: #BD93F9;
}

/* 8. ONE DARK PRO - LIGHT */
:root[data-theme="light"][data-theme-id="ONE_DARK_PRO"] {
  --primary: #61AFEF;
  --primary-hover: #4A9FDF;
  --primary-light: rgba(97, 175, 239, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #D0E8FF;
  --on-primary-container: #001E36;
  
  --secondary: #98C379;
  --on-secondary: #FFFFFF;
  
  --tertiary: #E5C07B;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #1E2127;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #1E2127;
  --text-main: #1E2127;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #E06C75;
  
  --header-bg: #61AFEF;
  --header-text: #FFFFFF;
  
  --tag-bg: #D0E8FF;
  --tag-text: #61AFEF;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(97, 175, 239, 0.15);
  --selection-border: #61AFEF;
}

/* 9. TOKYO NIGHT - LIGHT */
:root[data-theme="light"][data-theme-id="TOKYO_NIGHT"] {
  --primary: #7AA2F7;
  --primary-hover: #6A92E7;
  --primary-light: rgba(122, 162, 247, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #D0E8FF;
  --on-primary-container: #001E36;
  
  --secondary: #9ECE6A;
  --on-secondary: #FFFFFF;
  
  --tertiary: #BB9AF7;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #1A1B26;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #1A1B26;
  --text-main: #1A1B26;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #F7768E;
  
  --header-bg: #7AA2F7;
  --header-text: #FFFFFF;
  
  --tag-bg: #D0E8FF;
  --tag-text: #7AA2F7;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(122, 162, 247, 0.15);
  --selection-border: #7AA2F7;
}

/* 10. NORD - LIGHT */
:root[data-theme="light"][data-theme-id="NORD"] {
  --primary: #88C0D0;
  --primary-hover: #7AB0C0;
  --primary-light: rgba(136, 192, 208, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #D0E8FF;
  --on-primary-container: #001E36;
  
  --secondary: #A3BE8C;
  --on-secondary: #FFFFFF;
  
  --tertiary: #EBCB8B;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #2E3440;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #2E3440;
  --text-main: #2E3440;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #BF616A;
  
  --header-bg: #88C0D0;
  --header-text: #FFFFFF;
  
  --tag-bg: #D0E8FF;
  --tag-text: #88C0D0;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(136, 192, 208, 0.15);
  --selection-border: #88C0D0;
}

/* 11. NIGHT OWL - LIGHT */
:root[data-theme="light"][data-theme-id="NIGHT_OWL"] {
  --primary: #7FDBCA;
  --primary-hover: #6FCBBA;
  --primary-light: rgba(127, 219, 202, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #D0E8FF;
  --on-primary-container: #001E36;
  
  --secondary: #ADDB67;
  --on-secondary: #FFFFFF;
  
  --tertiary: #C792EA;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #011627;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #011627;
  --text-main: #011627;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #EF5350;
  
  --header-bg: #7FDBCA;
  --header-text: #FFFFFF;
  
  --tag-bg: #D0E8FF;
  --tag-text: #7FDBCA;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(127, 219, 202, 0.15);
  --selection-border: #7FDBCA;
}

/* 12. ANTHRACITE - LIGHT */
:root[data-theme="light"][data-theme-id="ANTHRACITE"] {
  --primary: #BB86FC;
  --primary-hover: #AA75EB;
  --primary-light: rgba(187, 134, 252, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #E8D5FF;
  --on-primary-container: #2A0A4A;
  
  --secondary: #03DAC6;
  --on-secondary: #FFFFFF;
  
  --tertiary: #CF6679;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #121212;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #121212;
  --text-main: #121212;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #CF6679;
  
  --header-bg: #BB86FC;
  --header-text: #FFFFFF;
  
  --tag-bg: #E8D5FF;
  --tag-text: #BB86FC;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(187, 134, 252, 0.15);
  --selection-border: #BB86FC;
}

/* 13. CYBERPUNK - LIGHT */
:root[data-theme="light"][data-theme-id="CYBERPUNK"] {
  --primary: #00FFFF;
  --primary-hover: #00DDDD;
  --primary-light: rgba(0, 255, 255, 0.15);
  --on-primary: #0A0A14;
  --primary-container: #D0F0FF;
  --on-primary-container: #001A1A;
  
  --secondary: #FF00FF;
  --on-secondary: #FFFFFF;
  
  --tertiary: #FFFF00;
  --on-tertiary: #0A0A14;
  
  --background: #FFFFFF;
  --on-background: #0A0A14;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #0A0A14;
  --text-main: #0A0A14;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #FF0055;
  
  --header-bg: #00FFFF;
  --header-text: #0A0A14;
  
  --tag-bg: #D0F0FF;
  --tag-text: #00FFFF;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(0, 255, 255, 0.15);
  --selection-border: #00FFFF;
}

/* 14. NAVY ELEGANCE - LIGHT */
:root[data-theme="light"][data-theme-id="NAVY_ELEGANCE"] {
  --primary: #D4AF37;
  --primary-hover: #C49F27;
  --primary-light: rgba(212, 175, 55, 0.15);
  --on-primary: #0B1929;
  --primary-container: #FFF8E1;
  --on-primary-container: #3D2A15;
  
  --secondary: #C0C0C0;
  --on-secondary: #0B1929;
  
  --tertiary: #87CEEB;
  --on-tertiary: #0B1929;
  
  --background: #FFFFFF;
  --on-background: #0B1929;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #0B1929;
  --text-main: #0B1929;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #EF4444;
  
  --header-bg: #D4AF37;
  --header-text: #0B1929;
  
  --tag-bg: #FFF8E1;
  --tag-text: #D4AF37;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(212, 175, 55, 0.15);
  --selection-border: #D4AF37;
}

/* 15. EARTHY - LIGHT */
:root[data-theme="light"][data-theme-id="EARTHY"] {
  --primary: #81C784;
  --primary-hover: #71B774;
  --primary-light: rgba(129, 199, 132, 0.15);
  --on-primary: #FFFFFF;
  --primary-container: #D1FAE5;
  --on-primary-container: #0A2A15;
  
  --secondary: #D4A574;
  --on-secondary: #FFFFFF;
  
  --tertiary: #A5D6A7;
  --on-tertiary: #FFFFFF;
  
  --background: #FFFFFF;
  --on-background: #1A1510;
  --bg-body: #FFFFFF;
  --bg-sidebar: #F5F5F5;
  --bg-card: #F5F5F5;
  --bg-card-hover: #EEEEEE;
  
  --surface: #F5F5F5;
  --on-surface: #1A1510;
  --text-main: #1A1510;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  --surface-variant: #EEEEEE;
  --on-surface-variant: #999999;
  
  --outline: #CCCCCC;
  --outline-variant: #DDDDDD;
  --border: #DDDDDD;
  --border-light: #EEEEEE;
  
  --error: #EF4444;
  
  --header-bg: #81C784;
  --header-text: #FFFFFF;
  
  --tag-bg: #D1FAE5;
  --tag-text: #81C784;
  --tag-green-bg: #D1FAE5;
  --tag-green-text: #065F46;
  --tag-red-bg: #FEE2E2;
  --tag-red-text: #991B1B;
  --tag-yellow-bg: #FEF3C7;
  --tag-yellow-text: #92400E;
  
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(129, 199, 132, 0.15);
  --selection-border: #81C784;
}