/**
 * Dark Mode Themes - WebMgmtConsole
 * Material Design 3 기반 다크 모드 컬러 팔레트
 *
 * 테마: Blue, Green, Red, Purple, Orange, Pink, Teal, Amber
 */

/* ========================================
   THEME: BLUE (기본 테마)
   ======================================== */
:root[data-theme="blue"][data-mode="dark"],
:root[data-mode="dark"]:not([data-theme]) {
  /* Primary Colors */
  --color-primary: #90CAF9;
  --color-primary-rgb: 144, 202, 249;
  --color-primary-light: #BBDEFB;
  --color-primary-dark: #42A5F5;
  --color-on-primary: #001D35;

  /* Secondary Colors */
  --color-secondary: #B0BEC5;
  --color-secondary-rgb: 176, 190, 197;
  --color-secondary-light: #CFD8DC;
  --color-secondary-dark: #90A4AE;
  --color-on-secondary: #1A1C1E;

  /* Background Colors */
  --color-background: #121212;
  --color-background-rgb: 18, 18, 18;
  --color-surface: #1E1E1E;
  --color-surface-variant: #2C2C2C;
  --color-on-background: #E1E1E1;
  --color-on-surface: #E1E1E1;

  /* Error Colors */
  --color-error: #EF5350;
  --color-error-rgb: 239, 83, 80;
  --color-error-light: #E57373;
  --color-error-dark: #D32F2F;
  --color-on-error: #FFFFFF;

  /* Warning Colors */
  --color-warning: #FF9800;
  --color-warning-rgb: 255, 152, 0;
  --color-warning-light: #FFB74D;
  --color-warning-dark: #F57C00;
  --color-on-warning: #000000;

  /* Success Colors */
  --color-success: #66BB6A;
  --color-success-rgb: 102, 187, 106;
  --color-success-light: #81C784;
  --color-success-dark: #4CAF50;
  --color-on-success: #FFFFFF;

  /* Info Colors */
  --color-info: #29B6F6;
  --color-info-rgb: 41, 182, 246;
  --color-info-light: #4FC3F7;
  --color-info-dark: #03A9F4;
  --color-on-info: #000000;

  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-disabled: rgba(255, 255, 255, 0.38);
  --color-text-hint: rgba(255, 255, 255, 0.38);

  /* Border Colors */
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-divider: rgba(255, 255, 255, 0.12);

  /* Overlay Colors */
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-scrim: rgba(0, 0, 0, 0.6);

  /* Component Specific */
  --color-header-bg: #1E3A5F;
  --color-header-text: #E1E1E1;
  --color-sidebar-bg: #1A1A1A;
  --color-sidebar-text: #E1E1E1;
  --color-sidebar-selected: #90CAF9;
  --color-sidebar-hover: rgba(255, 255, 255, 0.08);
  --color-tasklog-bg: #1E1E1E;
  --color-tasklog-border: rgba(255, 255, 255, 0.12);
}

/* ========================================
   THEME: GREEN
   ======================================== */
:root[data-theme="green"][data-mode="dark"] {
  /* Primary Colors */
  --color-primary: #81C784;
  --color-primary-rgb: 129, 199, 132;
  --color-primary-light: #A5D6A7;
  --color-primary-dark: #66BB6A;
  --color-on-primary: #003300;

  /* Secondary Colors */
  --color-secondary: #B0BEC5;
  --color-secondary-rgb: 176, 190, 197;
  --color-secondary-light: #CFD8DC;
  --color-secondary-dark: #90A4AE;
  --color-on-secondary: #1A1C1E;

  /* Background Colors */
  --color-background: #121212;
  --color-background-rgb: 18, 18, 18;
  --color-surface: #1E1E1E;
  --color-surface-variant: #2C2C2C;
  --color-on-background: #E1E1E1;
  --color-on-surface: #E1E1E1;

  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-disabled: rgba(255, 255, 255, 0.38);

  /* Component Specific */
  --color-header-bg: #1B5E20;
  --color-sidebar-bg: #1A1A1A;
  --color-sidebar-selected: #81C784;
}

/* ========================================
   THEME: RED
   ======================================== */
:root[data-theme="red"][data-mode="dark"] {
  /* Primary Colors */
  --color-primary: #E57373;
  --color-primary-rgb: 229, 115, 115;
  --color-primary-light: #EF9A9A;
  --color-primary-dark: #EF5350;
  --color-on-primary: #3A0000;

  /* Secondary Colors */
  --color-secondary: #B0BEC5;
  --color-secondary-rgb: 176, 190, 197;
  --color-secondary-light: #CFD8DC;
  --color-secondary-dark: #90A4AE;
  --color-on-secondary: #1A1C1E;

  /* Background Colors */
  --color-background: #121212;
  --color-background-rgb: 18, 18, 18;
  --color-surface: #1E1E1E;
  --color-surface-variant: #2C2C2C;
  --color-on-background: #E1E1E1;
  --color-on-surface: #E1E1E1;

  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-disabled: rgba(255, 255, 255, 0.38);

  /* Component Specific */
  --color-header-bg: #B71C1C;
  --color-sidebar-bg: #1A1A1A;
  --color-sidebar-selected: #E57373;
}

/* ========================================
   THEME: PURPLE
   ======================================== */
:root[data-theme="purple"][data-mode="dark"] {
  /* Primary Colors */
  --color-primary: #BA68C8;
  --color-primary-rgb: 186, 104, 200;
  --color-primary-light: #CE93D8;
  --color-primary-dark: #AB47BC;
  --color-on-primary: #2A0033;

  /* Secondary Colors */
  --color-secondary: #B0BEC5;
  --color-secondary-rgb: 176, 190, 197;
  --color-secondary-light: #CFD8DC;
  --color-secondary-dark: #90A4AE;
  --color-on-secondary: #1A1C1E;

  /* Background Colors */
  --color-background: #121212;
  --color-background-rgb: 18, 18, 18;
  --color-surface: #1E1E1E;
  --color-surface-variant: #2C2C2C;
  --color-on-background: #E1E1E1;
  --color-on-surface: #E1E1E1;

  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-disabled: rgba(255, 255, 255, 0.38);

  /* Component Specific */
  --color-header-bg: #4A148C;
  --color-sidebar-bg: #1A1A1A;
  --color-sidebar-selected: #BA68C8;
}

/* ========================================
   THEME: ORANGE
   ======================================== */
:root[data-theme="orange"][data-mode="dark"] {
  /* Primary Colors */
  --color-primary: #FFB74D;
  --color-primary-rgb: 255, 183, 77;
  --color-primary-light: #FFCC80;
  --color-primary-dark: #FFA726;
  --color-on-primary: #331A00;

  /* Secondary Colors */
  --color-secondary: #B0BEC5;
  --color-secondary-rgb: 176, 190, 197;
  --color-secondary-light: #CFD8DC;
  --color-secondary-dark: #90A4AE;
  --color-on-secondary: #1A1C1E;

  /* Background Colors */
  --color-background: #121212;
  --color-background-rgb: 18, 18, 18;
  --color-surface: #1E1E1E;
  --color-surface-variant: #2C2C2C;
  --color-on-background: #E1E1E1;
  --color-on-surface: #E1E1E1;

  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-disabled: rgba(255, 255, 255, 0.38);

  /* Component Specific */
  --color-header-bg: #E65100;
  --color-sidebar-bg: #1A1A1A;
  --color-sidebar-selected: #FFB74D;
}

/* ========================================
   THEME: PINK
   ======================================== */
:root[data-theme="pink"][data-mode="dark"] {
  /* Primary Colors */
  --color-primary: #F06292;
  --color-primary-rgb: 240, 98, 146;
  --color-primary-light: #F48FB1;
  --color-primary-dark: #EC407A;
  --color-on-primary: #330011;

  /* Secondary Colors */
  --color-secondary: #B0BEC5;
  --color-secondary-rgb: 176, 190, 197;
  --color-secondary-light: #CFD8DC;
  --color-secondary-dark: #90A4AE;
  --color-on-secondary: #1A1C1E;

  /* Background Colors */
  --color-background: #121212;
  --color-background-rgb: 18, 18, 18;
  --color-surface: #1E1E1E;
  --color-surface-variant: #2C2C2C;
  --color-on-background: #E1E1E1;
  --color-on-surface: #E1E1E1;

  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-disabled: rgba(255, 255, 255, 0.38);

  /* Component Specific */
  --color-header-bg: #880E4F;
  --color-sidebar-bg: #1A1A1A;
  --color-sidebar-selected: #F06292;
}

/* ========================================
   THEME: TEAL
   ======================================== */
:root[data-theme="teal"][data-mode="dark"] {
  /* Primary Colors */
  --color-primary: #4DB6AC;
  --color-primary-rgb: 77, 182, 172;
  --color-primary-light: #80CBC4;
  --color-primary-dark: #26A69A;
  --color-on-primary: #002622;

  /* Secondary Colors */
  --color-secondary: #B0BEC5;
  --color-secondary-rgb: 176, 190, 197;
  --color-secondary-light: #CFD8DC;
  --color-secondary-dark: #90A4AE;
  --color-on-secondary: #1A1C1E;

  /* Background Colors */
  --color-background: #121212;
  --color-background-rgb: 18, 18, 18;
  --color-surface: #1E1E1E;
  --color-surface-variant: #2C2C2C;
  --color-on-background: #E1E1E1;
  --color-on-surface: #E1E1E1;

  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-disabled: rgba(255, 255, 255, 0.38);

  /* Component Specific */
  --color-header-bg: #004D40;
  --color-sidebar-bg: #1A1A1A;
  --color-sidebar-selected: #4DB6AC;
}

/* ========================================
   THEME: AMBER
   ======================================== */
:root[data-theme="amber"][data-mode="dark"] {
  /* Primary Colors */
  --color-primary: #FFD54F;
  --color-primary-rgb: 255, 213, 79;
  --color-primary-light: #FFE082;
  --color-primary-dark: #FFCA28;
  --color-on-primary: #332600;

  /* Secondary Colors */
  --color-secondary: #B0BEC5;
  --color-secondary-rgb: 176, 190, 197;
  --color-secondary-light: #CFD8DC;
  --color-secondary-dark: #90A4AE;
  --color-on-secondary: #1A1C1E;

  /* Background Colors */
  --color-background: #121212;
  --color-background-rgb: 18, 18, 18;
  --color-surface: #1E1E1E;
  --color-surface-variant: #2C2C2C;
  --color-on-background: #E1E1E1;
  --color-on-surface: #E1E1E1;

  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-disabled: rgba(255, 255, 255, 0.38);

  /* Component Specific */
  --color-header-bg: #FF6F00;
  --color-sidebar-bg: #1A1A1A;
  --color-sidebar-selected: #FFD54F;
}