/* ========================================
   WESH360 Theme-Based Color Palette
   پالت رنگی تم‌دار برای بخش‌های مختلف سایت
   بازنویسی شده با Design Tokens
   ======================================== */

@import url('./design-tokens.css');

/* ===== 1. Utility Theme Colors ===== */
:root {
  /* آب - Water Theme (از primary palette استفاده می‌کند) */
  --theme-water-primary: var(--color-primary-500);
  --theme-water-light: var(--color-primary-300);
  --theme-water-dark: var(--color-primary-700);
  --theme-water-bg: var(--color-primary-50);
  --theme-water-border: var(--color-primary-200);

  /* برق - Electricity Theme */
  --theme-electricity-primary: var(--energy-electricity-primary);
  --theme-electricity-light: var(--energy-electricity-light);
  --theme-electricity-dark: var(--energy-electricity-dark);
  --theme-electricity-bg: var(--energy-electricity-bg);
  --theme-electricity-border: #ffe082;

  /* گاز - Gas Theme (از accent palette استفاده می‌کند) */
  --theme-gas-primary: var(--color-accent-500);
  --theme-gas-light: var(--color-accent-400);
  --theme-gas-dark: var(--color-accent-600);
  --theme-gas-bg: var(--energy-gas-bg);
  --theme-gas-border: #ffccbc;

  /* محیط زیست - Environment Theme (از secondary palette استفاده می‌کند) */
  --theme-environment-primary: var(--color-secondary-500);
  --theme-environment-light: var(--color-secondary-400);
  --theme-environment-dark: var(--color-secondary-600);
  --theme-environment-bg: var(--energy-renewable-bg);
  --theme-environment-border: #c8e6c9;

  /* خورشیدی - Solar Theme */
  --theme-solar-primary: #ff9800;
  --theme-solar-light: #ffb74d;
  --theme-solar-dark: #f57c00;
  --theme-solar-bg: #fff3e0;
  --theme-solar-border: #ffcc80;

  /* عمومی - General Theme */
  --theme-general-primary: var(--color-gray-600);
  --theme-general-light: var(--color-gray-400);
  --theme-general-dark: var(--color-gray-700);
  --theme-general-bg: var(--color-gray-50);
  --theme-general-border: var(--color-gray-200);
}

/* ===== 2. Dark Theme Adjustments ===== */
[data-theme="dark"] {
  /* آب - Water Theme */
  --theme-water-primary: var(--color-primary-400);
  --theme-water-light: var(--color-primary-300);
  --theme-water-dark: var(--color-primary-600);
  --theme-water-bg: var(--color-primary-900);
  --theme-water-border: var(--color-primary-700);

  /* برق - Electricity Theme */
  --theme-electricity-primary: #ffb300;
  --theme-electricity-light: #ffd54f;
  --theme-electricity-dark: #ff8f00;
  --theme-electricity-bg: rgba(255, 193, 7, 0.15);
  --theme-electricity-border: #f57c00;

  /* گاز - Gas Theme */
  --theme-gas-primary: var(--color-accent-400);
  --theme-gas-light: var(--color-accent-300);
  --theme-gas-dark: var(--color-accent-600);
  --theme-gas-bg: rgba(249, 115, 22, 0.15);
  --theme-gas-border: var(--color-accent-700);

  /* محیط زیست - Environment Theme */
  --theme-environment-primary: var(--color-secondary-400);
  --theme-environment-light: var(--color-secondary-300);
  --theme-environment-dark: var(--color-secondary-600);
  --theme-environment-bg: rgba(34, 197, 94, 0.15);
  --theme-environment-border: var(--color-secondary-700);

  /* خورشیدی - Solar Theme */
  --theme-solar-primary: #ffa726;
  --theme-solar-light: #ffb74d;
  --theme-solar-dark: #f57c00;
  --theme-solar-bg: rgba(255, 152, 0, 0.15);
  --theme-solar-border: #ef6c00;
}

/* ===== 3. Theme Section Styles ===== */

/* Water Section */
.water-section,
.section-water,
[data-theme-section="water"] {
  border-left: 4px solid var(--theme-water-primary);
  background: var(--theme-water-bg);
  border-color: var(--theme-water-border);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.water-card,
.card.water {
  border-color: var(--theme-water-border);
  background: var(--theme-water-bg);
  transition: all var(--transition-base);
}

.water-card:hover,
.card.water:hover {
  border-color: var(--theme-water-primary);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
  transform: translateY(-2px);
}

.water-badge,
.badge-water {
  background: var(--theme-water-primary);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Electricity Section */
.electricity-section,
.section-electricity,
[data-theme-section="electricity"] {
  border-left: 4px solid var(--theme-electricity-primary);
  background: var(--theme-electricity-bg);
  border-color: var(--theme-electricity-border);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.electricity-card,
.card.electricity {
  border-color: var(--theme-electricity-border);
  background: var(--theme-electricity-bg);
  transition: all var(--transition-base);
}

.electricity-card:hover,
.card.electricity:hover {
  border-color: var(--theme-electricity-primary);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
  transform: translateY(-2px);
}

.electricity-badge,
.badge-electricity {
  background: var(--theme-electricity-primary);
  color: var(--color-gray-900);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Gas Section */
.gas-section,
.section-gas,
[data-theme-section="gas"] {
  border-left: 4px solid var(--theme-gas-primary);
  background: var(--theme-gas-bg);
  border-color: var(--theme-gas-border);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.gas-card,
.card.gas {
  border-color: var(--theme-gas-border);
  background: var(--theme-gas-bg);
  transition: all var(--transition-base);
}

.gas-card:hover,
.card.gas:hover {
  border-color: var(--theme-gas-primary);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
  transform: translateY(-2px);
}

.gas-badge,
.badge-gas {
  background: var(--theme-gas-primary);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Environment Section */
.environment-section,
.section-environment,
[data-theme-section="environment"] {
  border-left: 4px solid var(--theme-environment-primary);
  background: var(--theme-environment-bg);
  border-color: var(--theme-environment-border);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.environment-card,
.card.environment {
  border-color: var(--theme-environment-border);
  background: var(--theme-environment-bg);
  transition: all var(--transition-base);
}

.environment-card:hover,
.card.environment:hover {
  border-color: var(--theme-environment-primary);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
  transform: translateY(-2px);
}

.environment-badge,
.badge-environment {
  background: var(--theme-environment-primary);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Solar Section */
.solar-section,
.section-solar,
[data-theme-section="solar"] {
  border-left: 4px solid var(--theme-solar-primary);
  background: var(--theme-solar-bg);
  border-color: var(--theme-solar-border);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.solar-card,
.card.solar {
  border-color: var(--theme-solar-border);
  background: var(--theme-solar-bg);
  transition: all var(--transition-base);
}

.solar-card:hover,
.card.solar:hover {
  border-color: var(--theme-solar-primary);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
  transform: translateY(-2px);
}

.solar-badge,
.badge-solar {
  background: var(--theme-solar-primary);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ===== 4. Tab Styles with Theme Colors ===== */
.wiz-tabs button[data-utility="water"] {
  color: var(--theme-water-primary);
}

.wiz-tabs button[data-utility="water"][aria-selected="true"],
.wiz-tabs button[data-utility="water"]:hover {
  background: var(--theme-water-bg);
  border-color: var(--theme-water-primary);
  color: var(--theme-water-dark);
}

.wiz-tabs button[data-utility="electricity"] {
  color: var(--theme-electricity-dark);
}

.wiz-tabs button[data-utility="electricity"][aria-selected="true"],
.wiz-tabs button[data-utility="electricity"]:hover {
  background: var(--theme-electricity-bg);
  border-color: var(--theme-electricity-primary);
  color: var(--theme-electricity-dark);
}

.wiz-tabs button[data-utility="gas"] {
  color: var(--theme-gas-primary);
}

.wiz-tabs button[data-utility="gas"][aria-selected="true"],
.wiz-tabs button[data-utility="gas"]:hover {
  background: var(--theme-gas-bg);
  border-color: var(--theme-gas-primary);
  color: var(--theme-gas-dark);
}

/* ===== 5. Icon Colors (for Font Awesome) ===== */
.icon-water,
.fa-water,
.fa-tint,
.fa-droplet {
  color: var(--theme-water-primary);
}

.icon-electricity,
.fa-bolt,
.fa-plug,
.fa-flash {
  color: var(--theme-electricity-primary);
}

.icon-gas,
.fa-fire,
.fa-flame {
  color: var(--theme-gas-primary);
}

.icon-environment,
.fa-leaf,
.fa-tree,
.fa-seedling {
  color: var(--theme-environment-primary);
}

.icon-solar,
.fa-sun,
.fa-solar-panel {
  color: var(--theme-solar-primary);
}

/* ===== 6. Utility Classes ===== */

/* Text Colors */
.text-water { color: var(--theme-water-primary) !important; }
.text-electricity { color: var(--theme-electricity-primary) !important; }
.text-gas { color: var(--theme-gas-primary) !important; }
.text-environment { color: var(--theme-environment-primary) !important; }
.text-solar { color: var(--theme-solar-primary) !important; }

/* Background Colors */
.bg-water { background-color: var(--theme-water-bg) !important; }
.bg-electricity { background-color: var(--theme-electricity-bg) !important; }
.bg-gas { background-color: var(--theme-gas-bg) !important; }
.bg-environment { background-color: var(--theme-environment-bg) !important; }
.bg-solar { background-color: var(--theme-solar-bg) !important; }

/* Border Colors */
.border-water { border-color: var(--theme-water-border) !important; }
.border-electricity { border-color: var(--theme-electricity-border) !important; }
.border-gas { border-color: var(--theme-gas-border) !important; }
.border-environment { border-color: var(--theme-environment-border) !important; }
.border-solar { border-color: var(--theme-solar-border) !important; }

/* ===== 7. Responsive Design ===== */
@media (max-width: 768px) {
  .water-section,
  .electricity-section,
  .gas-section,
  .environment-section,
  .solar-section {
    border-left-width: 2px;
    padding: var(--space-4);
  }
}