/* ==========================================
   REHYA LIGHT MODE - WARM, EASY-ON-EYES THEME
   ========================================== */

/* ==========================================
   ROOT LIGHT THEME VARIABLES - WARM TONES
   ========================================== */
[data-theme="light"] {
  /* Background Colors - Warm cream tones instead of harsh white */
  --bg-deep: #f5f3f0;
  --bg-elevated: #faf8f5;
  --bg-card: #ffffff;
  --bg-hover: #f0ece5;
  --bg-glass: rgba(250, 248, 245, 0.95);
  
  /* Text Colors - Darker for better contrast */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #6b6b6b;
  
  /* Borders - Softer */
  --border: rgba(0, 0, 0, 0.12);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-accent: rgba(212, 175, 55, 0.5);
  
  /* Glass border */
  --glass-border: rgba(0, 0, 0, 0.1);
  
  /* Accent soft - more visible on light bg */
  --accent-soft: rgba(212, 175, 55, 0.2);
  --accent-glow: rgba(212, 175, 55, 0.3);
}

/* ==========================================
   BASE LIGHT MODE OVERRIDES
   ========================================== */
[data-theme="light"] body {
  background: var(--bg-deep);
  color: var(--text-primary);
}

/* ==========================================
   HEADER LIGHT MODE
   ========================================== */
[data-theme="light"] .premium-header {
  background: linear-gradient(180deg, rgba(250,248,245,0.98) 0%, rgba(245,243,240,0.98) 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

[data-theme="light"] .header-top {
  background: linear-gradient(90deg, rgba(212,175,55,0.1), transparent, rgba(212,175,55,0.1));
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] .nav-item {
  color: var(--text-secondary);
}

[data-theme="light"] .nav-item:hover {
  color: var(--accent);
  background: rgba(212, 175, 55, 0.12);
}

[data-theme="light"] .mega-menu {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,248,245,0.98) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

[data-theme="light"] .dropdown-link {
  color: var(--text-secondary);
}

[data-theme="light"] .dropdown-link:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--text-primary);
}

[data-theme="light"] .dropdown-icon {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

[data-theme="light"] .notification-dropdown {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

[data-theme="light"] .notification-bell {
  color: var(--text-secondary);
}

[data-theme="light"] .notification-bell:hover {
  color: var(--accent);
  background: rgba(212, 175, 55, 0.12);
}

[data-theme="light"] .theme-btn {
  border-color: var(--border);
  color: var(--text-secondary);
  background: var(--bg-card);
}

[data-theme="light"] .theme-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(212, 175, 55, 0.15);
}

/* ==========================================
   MOBILE MENU LIGHT MODE
   ========================================== */
[data-theme="light"] .mobile-menu {
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}

[data-theme="light"] .mobile-submenu {
  border-left-color: var(--border);
}

/* ==========================================
   CARDS LIGHT MODE
   ========================================== */
[data-theme="light"] .card,
[data-theme="light"] .feature-card,
[data-theme="light"] .leader-card,
[data-theme="light"] .partner-card,
[data-theme="light"] .news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

[data-theme="light"] .card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .leader-card:hover,
[data-theme="light"] .partner-card:hover,
[data-theme="light"] .news-card:hover {
  border-color: var(--accent);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

[data-theme="light"] .feature-card::before {
  background: var(--accent);
}

/* ==========================================
   GALLERY LIGHT MODE
   ========================================== */
[data-theme="light"] .gallery-train-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
}

[data-theme="light"] .gallery-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

[data-theme="light"] .gallery-card:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
}

[data-theme="light"] .gallery-nav {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--accent);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

[data-theme="light"] .gallery-nav:hover {
  background: var(--accent);
  color: white;
}

/* ==========================================
   FORMS LIGHT MODE
   ========================================== */
[data-theme="light"] .form-input {
  border-bottom-color: var(--border);
  color: var(--text-primary);
  background: transparent;
}

[data-theme="light"] .form-input:focus {
  border-bottom-color: var(--accent);
}

[data-theme="light"] .form-input::placeholder {
  color: var(--text-muted);
}

[data-theme="light"] .form-label {
  color: var(--accent);
}

/* ==========================================
   BUTTONS LIGHT MODE
   ========================================== */
[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

[data-theme="light"] .btn-primary:hover {
  background: #c9a227;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

[data-theme="light"] .btn-outline {
  border-color: var(--border);
  color: var(--text-primary);
  background: transparent;
}

[data-theme="light"] .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(212, 175, 55, 0.1);
}

[data-theme="light"] .btn-ghost {
  color: var(--text-secondary);
  background: transparent;
}

[data-theme="light"] .btn-ghost:hover {
  color: var(--accent);
  background: rgba(212, 175, 55, 0.1);
}

/* ==========================================
   FOOTER LIGHT MODE
   ========================================== */
[data-theme="light"] footer {
  background: var(--bg-elevated);
  border-color: var(--border);
}

[data-theme="light"] footer a {
  color: var(--text-muted);
}

[data-theme="light"] footer a:hover {
  color: var(--accent);
}

[data-theme="light"] footer .w-10 {
  background: var(--bg-card);
  border: 1px solid var(--border);
}

[data-theme="light"] footer .w-10:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* ==========================================
   LIGHTBOX LIGHT MODE
   ========================================== */
[data-theme="light"] .lightbox-backdrop {
  background: rgba(0,0,0,0.9);
}

[data-theme="light"] .lightbox-close {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: white;
}

[data-theme="light"] .lightbox-close:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ==========================================
   TOAST NOTIFICATIONS LIGHT MODE
   ========================================== */
[data-theme="light"] .toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* ==========================================
   TABS LIGHT MODE
   ========================================== */
[data-theme="light"] [data-tabs] [data-tab] {
  color: var(--text-secondary);
}

[data-theme="light"] [data-tabs] [data-tab]:hover {
  color: var(--accent);
}

[data-theme="light"] [data-tabs] [data-tab].active {
  color: var(--accent);
}

[data-theme="light"] [data-tabs] [data-tab].active::after {
  background: var(--accent);
}

/* ==========================================
   TEXT & TYPOGRAPHY LIGHT MODE
   ========================================== */
[data-theme="light"] .text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .text-accent {
  color: var(--accent);
}

[data-theme="light"] .text-secondary {
  color: var(--text-secondary);
}

[data-theme="light"] .text-muted {
  color: var(--text-muted);
}

[data-theme="light"] .hero-title,
[data-theme="light"] .heading-hero,
[data-theme="light"] .heading-xl,
[data-theme="light"] .heading-lg,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: var(--text-primary);
}

[data-theme="light"] .hero-subtitle,
[data-theme="light"] p {
  color: var(--text-secondary);
}

/* ==========================================
   NOTIFICATIONS LIGHT MODE
   ========================================== */
[data-theme="light"] .notification-item {
  border-bottom-color: var(--border);
}

[data-theme="light"] .notification-item:hover {
  background: var(--bg-hover);
}

[data-theme="light"] .notification-item.unread {
  background: rgba(212, 175, 55, 0.08);
}

[data-theme="light"] .notification-header {
  border-bottom-color: var(--border);
}

[data-theme="light"] .mark-all-read {
  color: var(--accent);
}

/* ==========================================
   EMPTY STATES LIGHT MODE
   ========================================== */
[data-theme="light"] .empty-notifications {
  color: var(--text-muted);
}

/* ==========================================
   GLASS MORPHISM LIGHT MODE
   ========================================== */
[data-theme="light"] .glass {
  background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(250,248,245,0.95) 100%);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ==========================================
   PARTICLES & EFFECTS LIGHT MODE
   ========================================== */
[data-theme="light"] #particles-canvas,
[data-theme="light"] .particles-canvas {
  opacity: 0.25;
}

[data-theme="light"] .grain-overlay {
  opacity: 0.02;
}

/* ==========================================
   SCROLL INDICATOR LIGHT MODE
   ========================================== */
[data-theme="light"] .scroll-indicator {
  color: var(--text-muted);
}

[data-theme="light"] .scroll-indicator::after {
  background: linear-gradient(to bottom, var(--accent), transparent);
}

/* ==========================================
   NAV ACCENT LINE LIGHT MODE
   ========================================== */
[data-theme="light"] .nav-accent-line {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

/* ==========================================
   SELECTION LIGHT MODE
   ========================================== */
[data-theme="light"] ::selection {
  background: rgba(212, 175, 55, 0.3);
  color: var(--text-primary);
}

/* ==========================================
   SCROLLBAR LIGHT MODE
   ========================================== */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg-elevated);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--accent);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #c9a227;
}