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

/* ========================================
   THEME: BLUE (기본 테마)
   ======================================== */
:root[data-theme="blue"][data-mode="light"],
:root[data-mode="light"]:not([data-theme]) {
  /* Primary Colors */
  --color-primary: #1976D2;
  --color-primary-rgb: 25, 118, 210;
  --color-primary-light: #42A5F5;
  --color-primary-dark: #1565C0;
  --color-on-primary: #FFFFFF;

  /* Secondary Colors */
  --color-secondary: #424242;
  --color-secondary-rgb: 66, 66, 66;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;
  --color-on-secondary: #FFFFFF;

  /* Background Colors */
  --color-background: #FFFFFF;
  --color-background-rgb: 255, 255, 255;
  --color-surface: #F5F5F5;
  --color-surface-variant: #E3F2FD;
  --color-on-background: #212121;
  --color-on-surface: #212121;

  /* Component Specific */
  --color-header-bg: #1976D2;
  --color-sidebar-bg: #1E3A5F;
  --color-sidebar-selected: #42A5F5;
}

/* ========================================
   THEME: GREEN
   ======================================== */
:root[data-theme="green"][data-mode="light"] {
  /* Primary Colors */
  --color-primary: #388E3C;
  --color-primary-rgb: 56, 142, 60;
  --color-primary-light: #66BB6A;
  --color-primary-dark: #2E7D32;
  --color-on-primary: #FFFFFF;

  /* Secondary Colors */
  --color-secondary: #424242;
  --color-secondary-rgb: 66, 66, 66;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;
  --color-on-secondary: #FFFFFF;

  /* Background Colors */
  --color-background: #FFFFFF;
  --color-background-rgb: 255, 255, 255;
  --color-surface: #F5F5F5;
  --color-surface-variant: #E8F5E9;
  --color-on-background: #212121;
  --color-on-surface: #212121;

  /* Component Specific */
  --color-header-bg: #388E3C;
  --color-sidebar-bg: #1B5E20;
  --color-sidebar-selected: #66BB6A;
}

/* ========================================
   THEME: RED
   ======================================== */
:root[data-theme="red"][data-mode="light"] {
  /* Primary Colors */
  --color-primary: #D32F2F;
  --color-primary-rgb: 211, 47, 47;
  --color-primary-light: #EF5350;
  --color-primary-dark: #C62828;
  --color-on-primary: #FFFFFF;

  /* Secondary Colors */
  --color-secondary: #424242;
  --color-secondary-rgb: 66, 66, 66;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;
  --color-on-secondary: #FFFFFF;

  /* Background Colors */
  --color-background: #FFFFFF;
  --color-background-rgb: 255, 255, 255;
  --color-surface: #F5F5F5;
  --color-surface-variant: #FFEBEE;
  --color-on-background: #212121;
  --color-on-surface: #212121;

  /* Component Specific */
  --color-header-bg: #D32F2F;
  --color-sidebar-bg: #B71C1C;
  --color-sidebar-selected: #EF5350;
}

/* ========================================
   THEME: PURPLE
   ======================================== */
:root[data-theme="purple"][data-mode="light"] {
  /* Primary Colors */
  --color-primary: #7B1FA2;
  --color-primary-rgb: 123, 31, 162;
  --color-primary-light: #9C27B0;
  --color-primary-dark: #6A1B9A;
  --color-on-primary: #FFFFFF;

  /* Secondary Colors */
  --color-secondary: #424242;
  --color-secondary-rgb: 66, 66, 66;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;
  --color-on-secondary: #FFFFFF;

  /* Background Colors */
  --color-background: #FFFFFF;
  --color-background-rgb: 255, 255, 255;
  --color-surface: #F5F5F5;
  --color-surface-variant: #F3E5F5;
  --color-on-background: #212121;
  --color-on-surface: #212121;

  /* Component Specific */
  --color-header-bg: #7B1FA2;
  --color-sidebar-bg: #4A148C;
  --color-sidebar-selected: #9C27B0;
}

/* ========================================
   THEME: ORANGE
   ======================================== */
:root[data-theme="orange"][data-mode="light"] {
  /* Primary Colors */
  --color-primary: #F57C00;
  --color-primary-rgb: 245, 124, 0;
  --color-primary-light: #FF9800;
  --color-primary-dark: #E65100;
  --color-on-primary: #FFFFFF;

  /* Secondary Colors */
  --color-secondary: #424242;
  --color-secondary-rgb: 66, 66, 66;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;
  --color-on-secondary: #FFFFFF;

  /* Background Colors */
  --color-background: #FFFFFF;
  --color-background-rgb: 255, 255, 255;
  --color-surface: #F5F5F5;
  --color-surface-variant: #FFF3E0;
  --color-on-background: #212121;
  --color-on-surface: #212121;

  /* Component Specific */
  --color-header-bg: #F57C00;
  --color-sidebar-bg: #E65100;
  --color-sidebar-selected: #FF9800;
}

/* ========================================
   THEME: PINK
   ======================================== */
:root[data-theme="pink"][data-mode="light"] {
  /* Primary Colors */
  --color-primary: #C2185B;
  --color-primary-rgb: 194, 24, 91;
  --color-primary-light: #E91E63;
  --color-primary-dark: #AD1457;
  --color-on-primary: #FFFFFF;

  /* Secondary Colors */
  --color-secondary: #424242;
  --color-secondary-rgb: 66, 66, 66;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;
  --color-on-secondary: #FFFFFF;

  /* Background Colors */
  --color-background: #FFFFFF;
  --color-background-rgb: 255, 255, 255;
  --color-surface: #F5F5F5;
  --color-surface-variant: #FCE4EC;
  --color-on-background: #212121;
  --color-on-surface: #212121;

  /* Component Specific */
  --color-header-bg: #C2185B;
  --color-sidebar-bg: #880E4F;
  --color-sidebar-selected: #E91E63;
}

/* ========================================
   THEME: TEAL
   ======================================== */
:root[data-theme="teal"][data-mode="light"] {
  /* Primary Colors */
  --color-primary: #00796B;
  --color-primary-rgb: 0, 121, 107;
  --color-primary-light: #26A69A;
  --color-primary-dark: #00695C;
  --color-on-primary: #FFFFFF;

  /* Secondary Colors */
  --color-secondary: #424242;
  --color-secondary-rgb: 66, 66, 66;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;
  --color-on-secondary: #FFFFFF;

  /* Background Colors */
  --color-background: #FFFFFF;
  --color-background-rgb: 255, 255, 255;
  --color-surface: #F5F5F5;
  --color-surface-variant: #E0F2F1;
  --color-on-background: #212121;
  --color-on-surface: #212121;

  /* Component Specific */
  --color-header-bg: #00796B;
  --color-sidebar-bg: #004D40;
  --color-sidebar-selected: #26A69A;
}

/* ========================================
   THEME: AMBER
   ======================================== */
:root[data-theme="amber"][data-mode="light"] {
  /* Primary Colors */
  --color-primary: #FFA000;
  --color-primary-rgb: 255, 160, 0;
  --color-primary-light: #FFC107;
  --color-primary-dark: #FF8F00;
  --color-on-primary: #000000;

  /* Secondary Colors */
  --color-secondary: #424242;
  --color-secondary-rgb: 66, 66, 66;
  --color-secondary-light: #616161;
  --color-secondary-dark: #212121;
  --color-on-secondary: #FFFFFF;

  /* Background Colors */
  --color-background: #FFFFFF;
  --color-background-rgb: 255, 255, 255;
  --color-surface: #F5F5F5;
  --color-surface-variant: #FFF8E1;
  --color-on-background: #212121;
  --color-on-surface: #212121;

  /* Component Specific */
  --color-header-bg: #FFA000;
  --color-sidebar-bg: #FF6F00;
  --color-sidebar-selected: #FFC107;
}