/* Theme System - CSS Variables for Multiple Color Themes */

/* Default Theme - Pink (Original Meter Reading Theme) */
:root {
  --primary-color: #c2185b;
  --primary-dark: #ad1457;
  --primary-light: #e91e63;
  --secondary-color: #e91e63;
  --secondary-dark: #c2185b;
  --accent-color: #ff9800;
  --accent-dark: #f57c00;
  --danger-color: #c62828;
  --danger-dark: #b71c1c;
  --background-color: #ffeef8;
  --background-gradient-start: #ffeef8;
  --background-gradient-end: #ffe0f0;
  --card-background: #ffffff;
  --text-color: #333333;
  --text-secondary: #666666;
  --text-light: #999999;
  --border-color: #f8bbd0;
  --border-color-light: #fce4ec;
  --hover-overlay: rgba(255, 255, 255, 0.2);
  --user-info-color: #ffc1dc;
  --subtitle-color: #ffc1dc;
  --table-header: #fce4ec;
  --table-border: #f8bbd0;
  --stat-card-bg-start: #fce4ec;
  --stat-card-bg-end: #f8bbd0;
  --login-border-top: #e91e63;
  --alert-info-bg: #fce4ec;
  --alert-info-text: #c2185b;
  --alert-warning-bg: #fff3e0;
  --alert-warning-text: #e65100;
}

/* Dark Blue Theme */
[data-theme="darkblue"] {
  --primary-color: #2c3e50;
  --primary-dark: #1a252f;
  --primary-light: #34495e;
  --secondary-color: #3498db;
  --secondary-dark: #2980b9;
  --accent-color: #27ae60;
  --accent-dark: #229954;
  --danger-color: #e74c3c;
  --danger-dark: #c0392b;
  --background-color: #f5f5f5;
  --background-gradient-start: #f5f5f5;
  --background-gradient-end: #e0e0e0;
  --card-background: #ffffff;
  --text-color: #333333;
  --text-secondary: #7f8c8d;
  --text-light: #95a5a6;
  --border-color: #e9ecef;
  --border-color-light: #f8f9fa;
  --hover-overlay: rgba(255, 255, 255, 0.1);
  --user-info-color: #ecf0f1;
  --subtitle-color: #bdc3c7;
  --table-header: #f8f9fa;
  --table-border: #dee2e6;
  --stat-card-bg-start: #e3f2fd;
  --stat-card-bg-end: #bbdefb;
  --login-border-top: #3498db;
  --alert-info-bg: #e3f2fd;
  --alert-info-text: #1976d2;
  --alert-warning-bg: #fff3e0;
  --alert-warning-text: #e65100;
}

/* Sky Blue Theme */
[data-theme="skyblue"] {
  --primary-color: #0077be;
  --primary-dark: #005a8f;
  --primary-light: #0099e5;
  --secondary-color: #00b4d8;
  --secondary-dark: #0096c7;
  --accent-color: #48cae4;
  --accent-dark: #00b4d8;
  --danger-color: #ef476f;
  --danger-dark: #d62c4f;
  --background-color: #f0f9ff;
  --background-gradient-start: #e0f2fe;
  --background-gradient-end: #bae6fd;
  --card-background: #ffffff;
  --text-color: #1a1a1a;
  --text-secondary: #4a5568;
  --text-light: #718096;
  --border-color: #caf0f8;
  --border-color-light: #e0f2fe;
  --hover-overlay: rgba(255, 255, 255, 0.2);
  --user-info-color: #e0f2fe;
  --subtitle-color: #90e0ef;
  --table-header: #e0f2fe;
  --table-border: #ade8f4;
  --stat-card-bg-start: #e0f2fe;
  --stat-card-bg-end: #bae6fd;
  --login-border-top: #00b4d8;
  --alert-info-bg: #e0f2fe;
  --alert-info-text: #0077be;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #d97706;
}

/* Forest Green Theme */
[data-theme="forest"] {
  --primary-color: #2d6a4f;
  --primary-dark: #1b4332;
  --primary-light: #40916c;
  --secondary-color: #52b788;
  --secondary-dark: #40916c;
  --accent-color: #74c69d;
  --accent-dark: #52b788;
  --danger-color: #e63946;
  --danger-dark: #c1121f;
  --background-color: #f1faee;
  --background-gradient-start: #d8f3dc;
  --background-gradient-end: #b7e4c7;
  --card-background: #ffffff;
  --text-color: #212529;
  --text-secondary: #495057;
  --text-light: #6c757d;
  --border-color: #d8f3dc;
  --border-color-light: #e8f5e9;
  --hover-overlay: rgba(255, 255, 255, 0.15);
  --user-info-color: #d8f3dc;
  --subtitle-color: #95d5b2;
  --table-header: #e8f5e9;
  --table-border: #b7e4c7;
  --stat-card-bg-start: #d8f3dc;
  --stat-card-bg-end: #b7e4c7;
  --login-border-top: #52b788;
  --alert-info-bg: #d8f3dc;
  --alert-info-text: #2d6a4f;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #d97706;
}

/* Purple Theme */
[data-theme="purple"] {
  --primary-color: #6a4c93;
  --primary-dark: #533a71;
  --primary-light: #8a5aa5;
  --secondary-color: #9d4edd;
  --secondary-dark: #7b2cbf;
  --accent-color: #c77dff;
  --accent-dark: #9d4edd;
  --danger-color: #e63946;
  --danger-dark: #c1121f;
  --background-color: #faf5ff;
  --background-gradient-start: #f3e8ff;
  --background-gradient-end: #e9d5ff;
  --card-background: #ffffff;
  --text-color: #1a1a1a;
  --text-secondary: #4a5568;
  --text-light: #718096;
  --border-color: #e9d5ff;
  --border-color-light: #f3e8ff;
  --hover-overlay: rgba(255, 255, 255, 0.15);
  --user-info-color: #f3e8ff;
  --subtitle-color: #d8b4fe;
  --table-header: #f3e8ff;
  --table-border: #ddd6fe;
  --stat-card-bg-start: #f3e8ff;
  --stat-card-bg-end: #e9d5ff;
  --login-border-top: #9d4edd;
  --alert-info-bg: #f3e8ff;
  --alert-info-text: #6a4c93;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #d97706;
}

/* Sunset Orange Theme */
[data-theme="sunset"] {
  --primary-color: #d64045;
  --primary-dark: #a42f34;
  --primary-light: #e55257;
  --secondary-color: #ff6b6b;
  --secondary-dark: #ee5a52;
  --accent-color: #ffa07a;
  --accent-dark: #ff8c69;
  --danger-color: #c92a2a;
  --danger-dark: #a61e1e;
  --background-color: #fff5f5;
  --background-gradient-start: #ffe4e1;
  --background-gradient-end: #ffc9c9;
  --card-background: #ffffff;
  --text-color: #1a1a1a;
  --text-secondary: #4a5568;
  --text-light: #718096;
  --border-color: #ffe4e1;
  --border-color-light: #fff5f5;
  --hover-overlay: rgba(255, 255, 255, 0.2);
  --user-info-color: #ffe4e1;
  --subtitle-color: #ffb3ba;
  --table-header: #fff5f5;
  --table-border: #ffc9c9;
  --stat-card-bg-start: #ffe4e1;
  --stat-card-bg-end: #ffc9c9;
  --login-border-top: #ff6b6b;
  --alert-info-bg: #ffe4e1;
  --alert-info-text: #d64045;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #d97706;
}

/* Ocean Teal Theme */
[data-theme="ocean"] {
  --primary-color: #0d7377;
  --primary-dark: #0a5558;
  --primary-light: #14919b;
  --secondary-color: #14919b;
  --secondary-dark: #0d7377;
  --accent-color: #32e0c4;
  --accent-dark: #14919b;
  --danger-color: #e63946;
  --danger-dark: #c1121f;
  --background-color: #f0fdfa;
  --background-gradient-start: #ccfbf1;
  --background-gradient-end: #99f6e4;
  --card-background: #ffffff;
  --text-color: #1a1a1a;
  --text-secondary: #4a5568;
  --text-light: #718096;
  --border-color: #ccfbf1;
  --border-color-light: #f0fdfa;
  --hover-overlay: rgba(255, 255, 255, 0.15);
  --user-info-color: #ccfbf1;
  --subtitle-color: #5eead4;
  --table-header: #ccfbf1;
  --table-border: #99f6e4;
  --stat-card-bg-start: #ccfbf1;
  --stat-card-bg-end: #99f6e4;
  --login-border-top: #14919b;
  --alert-info-bg: #ccfbf1;
  --alert-info-text: #0d7377;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #d97706;
}

/* Midnight Blue Theme */
[data-theme="midnight"] {
  --primary-color: #1e3a5f;
  --primary-dark: #0f1e3f;
  --primary-light: #2e4a6f;
  --secondary-color: #4a90e2;
  --secondary-dark: #3a7bc8;
  --accent-color: #50c878;
  --accent-dark: #40a860;
  --danger-color: #e74c3c;
  --danger-dark: #c0392b;
  --background-color: #f5f7fa;
  --background-gradient-start: #e1e8ed;
  --background-gradient-end: #cfd8dc;
  --card-background: #ffffff;
  --text-color: #2c3e50;
  --text-secondary: #546e7a;
  --text-light: #78909c;
  --border-color: #e1e8ed;
  --border-color-light: #eceff1;
  --hover-overlay: rgba(255, 255, 255, 0.12);
  --user-info-color: #dfe6e9;
  --subtitle-color: #a4b0be;
  --table-header: #eceff1;
  --table-border: #cfd8dc;
  --stat-card-bg-start: #e1e8ed;
  --stat-card-bg-end: #cfd8dc;
  --login-border-top: #4a90e2;
  --alert-info-bg: #e1e8ed;
  --alert-info-text: #1e3a5f;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #d97706;
}

/* Warm Brown Theme */
[data-theme="warm"] {
  --primary-color: #6d4c41;
  --primary-dark: #4e342e;
  --primary-light: #8d6e63;
  --secondary-color: #a1887f;
  --secondary-dark: #8d6e63;
  --accent-color: #ff9800;
  --accent-dark: #f57c00;
  --danger-color: #e53935;
  --danger-dark: #c62828;
  --background-color: #fafaf8;
  --background-gradient-start: #efebe9;
  --background-gradient-end: #d7ccc8;
  --card-background: #ffffff;
  --text-color: #3e2723;
  --text-secondary: #5d4037;
  --text-light: #795548;
  --border-color: #efebe9;
  --border-color-light: #f5f5f5;
  --hover-overlay: rgba(255, 255, 255, 0.15);
  --user-info-color: #efebe9;
  --subtitle-color: #bcaaa4;
  --table-header: #efebe9;
  --table-border: #d7ccc8;
  --stat-card-bg-start: #efebe9;
  --stat-card-bg-end: #d7ccc8;
  --login-border-top: #a1887f;
  --alert-info-bg: #efebe9;
  --alert-info-text: #6d4c41;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #d97706;
}