/**
 * ═══════════════════════════════════════════════════════════
 * THEME SYSTEM - Light & Dark Mode Variables
 * Phase 3: A+ Premium Features
 * ═══════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────
   LIGHT THEME (Default)
   ───────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Primary Colors */
  --theme-bg-primary: #FFFFFF;
  --theme-bg-secondary: #F8FAFC;
  --theme-bg-tertiary: #F1F5F9;
  --theme-bg-elevated: #FFFFFF;

  /* Text Colors */
  --theme-text-primary: #0F172A;
  --theme-text-secondary: #475569;
  --theme-text-tertiary: #64748B;
  --theme-text-muted: #94A3B8;
  --theme-text-inverse: #FFFFFF;

  /* Accent Colors */
  --theme-accent-blue: #1366D6;
  --theme-accent-purple: #8B5CF6;
  --theme-accent-gold: #D4AF37;

  /* Borders */
  --theme-border-light: #E2E8F0;
  --theme-border-medium: #CBD5E1;
  --theme-border-strong: #94A3B8;
  --theme-border-accent: rgba(212, 175, 55, 0.3);

  /* Shadows */
  --theme-shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.08);
  --theme-shadow-md: 0 8px 12px -2px rgb(0 0 0 / 0.15), 0 4px 8px -4px rgb(0 0 0 / 0.15);
  --theme-shadow-lg: 0 20px 30px -6px rgb(0 0 0 / 0.15), 0 8px 12px -8px rgb(0 0 0 / 0.15);
  --theme-shadow-xl: 0 40px 50px -10px rgb(0 0 0 / 0.15), 0 16px 20px -12px rgb(0 0 0 / 0.15);

  /* Glass-morphism */
  --theme-glass-bg: rgba(255, 255, 255, 0.7);
  --theme-glass-border: rgba(255, 255, 255, 0.3);
  --theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* Navigation */
  --theme-nav-bg: rgba(0, 0, 0, 0.7);
  --theme-nav-text: #FFFFFF;
  --theme-nav-border: rgba(255, 255, 255, 0.1);

  /* Mesh Gradient Colors (Light) */
  --theme-mesh-1: rgba(21, 142, 255, 0.15);
  --theme-mesh-2: rgba(139, 92, 246, 0.12);
  --theme-mesh-3: rgba(212, 175, 55, 0.08);
  --theme-mesh-4: rgba(21, 142, 255, 0.10);
  --theme-mesh-5: rgba(139, 92, 246, 0.08);

  /* Card Backgrounds */
  --theme-card-bg: rgba(248, 250, 252, 0.8);
  --theme-card-hover-bg: rgba(248, 250, 252, 1);
  --theme-card-border: rgba(226, 232, 240, 0.5);

  /* Special Elements */
  --theme-hebrew-text: #D4AF37;
  --theme-highlight-bg: rgba(21, 142, 255, 0.1);
  --theme-code-bg: #F1F5F9;
}

/* ─────────────────────────────────────────────
   DARK THEME
   ───────────────────────────────────────────── */
[data-theme="dark"] {
  /* Primary Colors */
  --theme-bg-primary: #0F172A;
  --theme-bg-secondary: #1E293B;
  --theme-bg-tertiary: #334155;
  --theme-bg-elevated: #1E293B;

  /* Text Colors */
  --theme-text-primary: #F8FAFC;
  --theme-text-secondary: #CBD5E1;
  --theme-text-tertiary: #94A3B8;
  --theme-text-muted: #64748B;
  --theme-text-inverse: #0F172A;

  /* Accent Colors (slightly brighter for dark mode) */
  --theme-accent-blue: #3B82F6;
  --theme-accent-purple: #A78BFA;
  --theme-accent-gold: #FCD34D;

  /* Borders */
  --theme-border-light: rgba(148, 163, 184, 0.1);
  --theme-border-medium: rgba(148, 163, 184, 0.2);
  --theme-border-strong: rgba(148, 163, 184, 0.3);
  --theme-border-accent: rgba(252, 211, 77, 0.3);

  /* Shadows (more prominent in dark mode) */
  --theme-shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.3);
  --theme-shadow-md: 0 8px 12px -2px rgb(0 0 0 / 0.4), 0 4px 8px -4px rgb(0 0 0 / 0.4);
  --theme-shadow-lg: 0 20px 30px -6px rgb(0 0 0 / 0.5), 0 8px 12px -8px rgb(0 0 0 / 0.5);
  --theme-shadow-xl: 0 40px 50px -10px rgb(0 0 0 / 0.6), 0 16px 20px -12px rgb(0 0 0 / 0.6);

  /* Glass-morphism (dark) */
  --theme-glass-bg: rgba(30, 41, 59, 0.7);
  --theme-glass-border: rgba(148, 163, 184, 0.1);
  --theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Navigation (lighter in dark mode) */
  --theme-nav-bg: rgba(15, 23, 42, 0.8);
  --theme-nav-text: #F8FAFC;
  --theme-nav-border: rgba(148, 163, 184, 0.1);

  /* Mesh Gradient Colors (Dark) */
  --theme-mesh-1: rgba(59, 130, 246, 0.20);
  --theme-mesh-2: rgba(167, 139, 250, 0.15);
  --theme-mesh-3: rgba(252, 211, 77, 0.10);
  --theme-mesh-4: rgba(59, 130, 246, 0.15);
  --theme-mesh-5: rgba(167, 139, 250, 0.10);

  /* Card Backgrounds */
  --theme-card-bg: rgba(30, 41, 59, 0.6);
  --theme-card-hover-bg: rgba(30, 41, 59, 0.9);
  --theme-card-border: rgba(148, 163, 184, 0.15);

  /* Special Elements */
  --theme-hebrew-text: #FCD34D;
  --theme-highlight-bg: rgba(59, 130, 246, 0.2);
  --theme-code-bg: #1E293B;
}

/* ─────────────────────────────────────────────
   SMOOTH THEME TRANSITION
   ───────────────────────────────────────────── */
* {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Disable transition for specific elements */
.no-theme-transition,
.ripple,
.button-glow,
.hero-bg-gradient {
  transition: none !important;
}

/* ─────────────────────────────────────────────
   SYSTEM PREFERENCE DETECTION
   ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Only apply if user hasn't manually set preference */
    --theme-bg-primary: #0F172A;
    --theme-text-primary: #F8FAFC;
    /* ... other dark theme variables would cascade ... */
  }
}

/* ─────────────────────────────────────────────
   THEME-AWARE COMPONENT STYLES
   ───────────────────────────────────────────── */

/* Body background with theme */
body {
  background: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

/* Navigation with theme */
.nav-modern {
  background: var(--theme-nav-bg);
  border-bottom-color: var(--theme-nav-border);
}

.nav-link-modern {
  color: var(--theme-nav-text);
}

/* Cards with theme */
.mode-card,
.access-card,
.feature-card-modern,
.current-parsha-modern,
.holiday-card,
.parsha-card {
  background: var(--theme-card-bg);
  border-color: var(--theme-card-border);
  box-shadow: var(--theme-shadow-lg);
}

.mode-card:hover,
.access-card:hover,
.feature-card-modern:hover,
.holiday-card:hover,
.parsha-card:hover {
  background: var(--theme-card-hover-bg);
  box-shadow: var(--theme-shadow-xl);
}

/* Text elements */
h1, h2, h3, h4, h5, h6 {
  color: var(--theme-text-primary);
}

p, span, li, a {
  color: inherit;
}

.text-secondary {
  color: var(--theme-text-secondary);
}

.text-muted {
  color: var(--theme-text-muted);
}

/* Hebrew text with theme */
.hebrew-date-modern,
.parsha-name,
.verse-hebrew {
  color: var(--theme-hebrew-text);
}

/* Buttons with theme */
.btn-primary-modern {
  background: var(--theme-accent-blue);
  color: var(--theme-text-inverse);
}

.btn-secondary-modern {
  background: var(--theme-bg-elevated);
  color: var(--theme-text-primary);
  border-color: var(--theme-border-medium);
}

/* Glass-morphism with theme */
.hero-badge,
.current-parsha-modern {
  background: var(--theme-glass-bg);
  border-color: var(--theme-glass-border);
  box-shadow: var(--theme-glass-shadow);
}

/* Borders with theme */
.border-light {
  border-color: var(--theme-border-light);
}

.border-medium {
  border-color: var(--theme-border-medium);
}

/* ─────────────────────────────────────────────
   DARK MODE SPECIFIC ADJUSTMENTS
   ───────────────────────────────────────────── */
[data-theme="dark"] {
  /* Mesh gradient needs different opacity in dark mode */
  .hero-bg-gradient {
    opacity: 0.6; /* Reduce opacity for dark mode */
  }

  /* Images need slight brightness reduction */
  img:not(.no-dark-adjust) {
    filter: brightness(0.9);
  }

  /* Code blocks */
  code, pre {
    background: var(--theme-code-bg);
    border-color: var(--theme-border-light);
  }

  /* Scrollbar (Webkit) */
  ::-webkit-scrollbar {
    background: var(--theme-bg-secondary);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--theme-border-strong);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted);
  }
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY: HIGH CONTRAST MODE
   ───────────────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --theme-text-primary: #000000;
    --theme-bg-primary: #FFFFFF;
    --theme-border-medium: #000000;
  }

  [data-theme="dark"] {
    --theme-text-primary: #FFFFFF;
    --theme-bg-primary: #000000;
    --theme-border-medium: #FFFFFF;
  }
}

/* ─────────────────────────────────────────────
   PRINT STYLES (Always light)
   ───────────────────────────────────────────── */
@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}