/**
 * Theme Overrides
 * Softens light mode to reduce eye strain while maintaining brand identity.
 */

/* ==========================================
   LIGHT MODE - Softer, Warmer Palette
   ========================================== */

:root[data-theme="light"] {
  /* Background colors - muted slate-blue, NOT bright */
  --zg-body-bg: #c8d0e0;
  --zg-surface-default: #d5dcea;
  --zg-surface-muted: #bcc6d8;
  --zg-surface-card: rgba(36, 64, 107, 0.08);

  /* Text colors - strong contrast for readability */
  --zg-text-default: #141c2a;
  --zg-text-default-80: rgba(20, 28, 42, 0.8);
  --zg-text-muted: #3d4a5c;
  --zg-text-muted-70: rgba(61, 74, 92, 0.75);

  /* Borders - visible */
  --zg-border-subtle: rgba(36, 64, 107, 0.18);
  --zg-border-strong: rgba(36, 64, 107, 0.32);

  /* Hero section */
  --zg-hero-bg: linear-gradient(135deg, #c8d0e0 0%, #b8c4da 100%);
  --zg-hero-lede: rgba(20, 28, 42, 0.9);

  /* Panels - muted, comfortable gradients */
  --zg-panel-border: rgba(36, 64, 107, 0.22);
  --zg-panel-bg: linear-gradient(135deg, rgba(215, 224, 240, 0.98), rgba(185, 202, 235, 0.92));
  --zg-panel-inner-border: rgba(36, 64, 107, 0.18);
  --zg-panel-inner-bg: rgba(205, 218, 242, 0.95);
  --zg-panel-inner-highlight: rgba(36, 64, 107, 0.18);

  /* Cards - muted surfaces */
  --zg-electric-surface: rgba(215, 224, 240, 0.96);
  --zg-electric-border: rgba(36, 64, 107, 0.18);
  --zg-electric-shadow: 0 18px 38px rgba(36, 64, 107, 0.14);
  --zg-electric-soft-surface: rgba(205, 218, 240, 0.96);
  --zg-electric-soft-border: rgba(36, 64, 107, 0.14);
  --zg-electric-soft-shadow: 0 16px 32px rgba(36, 64, 107, 0.12);

  /* Role cards */
  --zg-role-card-bg: linear-gradient(150deg, rgba(215, 224, 240, 0.98), rgba(195, 212, 245, 0.95));
  --zg-role-card-shadow: 0 30px 60px rgba(36, 64, 107, 0.16);

  /* Modals */
  --zg-modal-backdrop: rgba(20, 28, 42, 0.55);
  --zg-modal-surface: linear-gradient(155deg, rgba(228, 234, 245, 0.99), rgba(205, 218, 242, 0.97));
  --zg-modal-shadow: 0 44px 80px rgba(36, 64, 107, 0.2);

  /* Form inputs */
  --zg-application-input-bg: rgba(220, 228, 242, 0.98);
}

/* Light mode body background gradient - softer */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 20% 18%, rgba(91, 124, 255, 0.1), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(36, 64, 107, 0.08), transparent 60%),
    radial-gradient(circle at 64% 74%, rgba(34, 184, 207, 0.1), transparent 60%);
  opacity: 0.5;
}

/* Agency logos in light mode - softer shadow */
:root[data-theme="light"] .agency-logo {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(36, 64, 107, 0.18);
  box-shadow: 0 12px 24px rgba(36, 64, 107, 0.12);
}

/* Footer in light mode */
:root[data-theme="light"] footer {
  background-color: rgba(220, 228, 242, 0.6);
}

/* Contact panel light mode glow - subtler */
:root[data-theme="light"] .contact-panel::before {
  background:
    radial-gradient(circle at 18% 20%, rgba(91, 124, 255, 0.15), transparent 62%),
    radial-gradient(circle at 82% 78%, rgba(34, 184, 207, 0.12), transparent 55%),
    linear-gradient(145deg, rgba(91, 124, 255, 0.04), transparent);
  opacity: 0.7;
}

/* ==========================================
   DARK MODE - Refinements
   ========================================== */

:root[data-theme="dark"] {
  /* Slightly warmer dark tones */
  --zg-body-bg: #070012;
  --zg-surface-default: #0e1320;
  --zg-surface-muted: #101828;
}

/* ==========================================
   SMOOTH THEME TRANSITIONS
   ========================================== */

html {
  transition: background-color 0.3s ease;
}

body,
.contact-panel,
.card,
.agency-logo,
footer,
.electric-border-content {
  transition:
    background-color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

/* Disable transitions on initial load */
html.no-transition,
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
  transition: none !important;
}

/* ==========================================
   REDUCED MOTION PREFERENCE
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .contact-panel,
  .card,
  .agency-logo,
  footer,
  .electric-border-content {
    transition: none !important;
  }
}