/* ═══════════════════════════════════════════════
   Laddressa.AI — Theme Variable Overrides v3
   Blue Night (deep navy) + Off-white (warm light) palette
   WCAG AA compliant contrast ratios
   ═══════════════════════════════════════════════ */

/* ── LIGHT MODE: Warm off-white palette ──
   Page bg: #FAFAFA (neutral), Cards: #FFFFFF, Text: #1A1A1A
   Applied to dark-first CSS-variable pages (index, membership, live-signals, messages) */
html[data-theme="light"] {
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Core surfaces */
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-hover: #F5F5F5;
  --surface2: #F5F5F5;
  --card: #FFFFFF;
  --card-hover: #FAFAFA;
  --border: #E5E5E5;
  --border-focus: #2563EB;

  /* Accents — slightly desaturated for light bg */
  --accent: #2563EB;
  --accent-glow: rgba(37, 99, 235, 0.08);
  --secondary: #7C3AED;
  --success: #059669;
  --warning: #D97706;
  --danger: #DC2626;
  --critical: #DC2626;
  --info: #2563EB;

  /* Text — WCAG AA compliant on #FAFAFA bg */
  --text: #1A1A1A;           /* 15.4:1 on #FAFAFA */
  --text-muted: #525252;     /* 7.1:1 on #FAFAFA — passes AA+AAA */
  --text-dim: #737373;       /* 4.6:1 on #FAFAFA — passes AA */
  --text2: #262626;          /* 14.2:1 */
  --text3: #525252;          /* 7.1:1 */

  /* Gradient stops */
  --g1: #2563EB;
  --g2: #7C3AED;
  --g3: #059669;
  --g4: #D97706;

  /* ── messages.html specific vars ── */
  --bg-primary: #FAFAFA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F5F5F5;
  --bg-hover: #E5E5E5;
  --bg-active: #D4D4D4;
  --surface-glass: rgba(0, 0, 0, 0.02);
  --surface-glass-hover: rgba(0, 0, 0, 0.04);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.12);
  --text-primary: #1A1A1A;
  --text-secondary: #525252;
  --text-tertiary: #737373;
  --accent-light: #3B82F6;
  --accent-glow-strong: rgba(37, 99, 235, 0.14);
  --green: #059669;
  --green-glow: rgba(5, 150, 105, 0.10);
  --orange: #D97706;
  --orange-glow: rgba(217, 119, 6, 0.08);
  --red: #DC2626;
  --purple: #7C3AED;
  --purple-glow: rgba(124, 58, 237, 0.08);
  --pink: #DB2777;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 16px rgba(37, 99, 235, 0.06);
}

/* ── DARK MODE: Blue Night palette ──
   Deep navy/slate-tinted darks instead of neutral grey
   Tailwind Slate scale: 950→#020617, 900→#0F172A, 800→#1E293B, 700→#334155 */
html[data-theme="dark"] {
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --bg: #0A0F1E;
  --surface: #111827;
  --surface-hover: #1E293B;
  --surface2: #1E293B;
  --card: #111827;
  --card-hover: #1E293B;
  --border: #1E293B;
  --border-focus: #3B82F6;
  --accent: #3B82F6;
  --accent-glow: rgba(59, 130, 246, 0.15);
  --secondary: #8B5CF6;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --critical: #FF7B72;
  --info: #60A5FA;

  /* Text — WCAG AA on deep navy bg */
  --text: #E2E8F0;           /* ~14:1 on #0A0F1E */
  --text-muted: #94A3B8;     /* ~7:1 on #0A0F1E */
  --text-dim: #64748B;       /* ~4.5:1 on #0A0F1E */
  --text2: #CBD5E1;
  --text3: #94A3B8;

  --g1: #3B82F6;
  --g2: #8B5CF6;
  --g3: #10B981;
  --g4: #F59E0B;

  /* messages.html vars */
  --bg-primary: #0A0F1E;
  --bg-secondary: #111827;
  --bg-tertiary: #1E293B;
  --bg-hover: #334155;
  --bg-active: #475569;
  --surface-glass: rgba(148, 163, 184, 0.04);
  --surface-glass-hover: rgba(148, 163, 184, 0.08);
  --border-subtle: rgba(148, 163, 184, 0.08);
  --border-medium: rgba(148, 163, 184, 0.14);
  --text-primary: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --accent-light: #60A5FA;
  --accent-glow-strong: rgba(59, 130, 246, 0.25);
  --green: #10B981;
  --green-glow: rgba(16, 185, 129, 0.15);
  --orange: #F59E0B;
  --orange-glow: rgba(245, 158, 11, 0.12);
  --red: #EF4444;
  --purple: #8B5CF6;
  --purple-glow: rgba(139, 92, 246, 0.12);
  --pink: #EC4899;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
}

/* ═══════════════════════════════════════════════
   Component-level overrides
   ═══════════════════════════════════════════════ */

/* ── Nav spacing — clear the fixed theme toggle button (36px + 12px gap) ── */
.lang-switcher, .lang-switch, .nav-right, .header-right {
  margin-right: 48px;
}
/* Tailwind pages: header right-padding so last nav item clears the toggle */
header.sticky {
  padding-right: 48px;
}

/* ── Scrollbars ── */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #FAFAFA; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #D4D4D4; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0A0F1E; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }

/* ── live-signals.html ── */
html[data-theme="light"] .ticker {
  background: linear-gradient(90deg, rgba(37,99,235,.05), rgba(6,182,212,.05));
  border-color: rgba(37,99,235,.10);
}
html[data-theme="light"] .lang-switch { background: #F5F5F5; }
html[data-theme="light"] .search-bar { background: #F5F5F5; border-color: #E5E5E5; }
html[data-theme="light"] .search-bar input { color: #1A1A1A; }
html[data-theme="light"] .avatar { box-shadow: 0 0 0 2px #E5E5E5; }

/* ── Tailwind pages dark overrides for hardcoded inline styles ── */
html[data-theme="dark"] .signal-item:hover { background: rgba(59,130,246,0.08) !important; }
html[data-theme="dark"] .loading-skeleton {
  background: linear-gradient(90deg, #1E293B 25%, #334155 50%, #1E293B 75%) !important;
  background-size: 200% 100% !important;
}

/* ── Common component overrides ── */
html[data-theme="light"] .nav-logo-icon,
html[data-theme="light"] .logo-icon { box-shadow: 0 2px 8px rgba(37,99,235,0.14); }

html[data-theme="light"] #login-gate { background: rgba(250, 250, 250, 0.96); }

html[data-theme="light"] .plan-card { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
html[data-theme="light"] .plan-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
html[data-theme="light"] .addon-card { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

html[data-theme="light"] .persona-menu { box-shadow: 0 8px 32px rgba(0,0,0,0.10); }

html[data-theme="light"] .nav-tab:hover { background: rgba(37,99,235,0.04); }
html[data-theme="light"] .nav-tab.active { background: rgba(37,99,235,0.06); }
html[data-theme="light"] .tab:hover { background: rgba(0,0,0,0.02); }
html[data-theme="light"] .tab.active { background: rgba(37,99,235,0.04); }

html[data-theme="light"] .footer { background: #FFFFFF; }

/* ── Tailwind pages: dark mode global style fixes ──
   For pages using dist/styles.css (pre-compiled) that need dark overrides
   Blue Night palette: uses slate-tinted dark blues instead of neutral greys */
html.dark .bg-white { background-color: #111827 !important; }
html.dark .bg-gray-50 { background-color: #0A0F1E !important; }
html.dark .bg-gray-100 { background-color: #111827 !important; }
html.dark .bg-gray-200 { background-color: #1E293B !important; }
html.dark .border-gray-200 { border-color: #1E293B !important; }
html.dark .border-gray-100 { border-color: #1E293B !important; }
html.dark .border-gray-300 { border-color: #334155 !important; }
html.dark .text-gray-900 { color: #E2E8F0 !important; }
html.dark .text-gray-800 { color: #CBD5E1 !important; }
html.dark .text-gray-700 { color: #94A3B8 !important; }
html.dark .text-gray-600 { color: #94A3B8 !important; }
html.dark .text-gray-500 { color: #64748B !important; }
html.dark .text-gray-400 { color: #64748B !important; }
html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; }
html.dark .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; }
html.dark .shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important; }
html.dark .shadow-xl { box-shadow: 0 12px 32px rgba(0,0,0,0.6) !important; }
html.dark .hover\:bg-gray-50:hover { background-color: #1E293B !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #1E293B !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #334155 !important; }
html.dark .hover\:text-gray-900:hover { color: #E2E8F0 !important; }
html.dark .hover\:text-gray-700:hover { color: #CBD5E1 !important; }
html.dark input, html.dark textarea, html.dark select {
  color-scheme: dark;
}

/* ── Tailwind color-50 bg overrides for dark mode (blue-tinted) ── */
html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.10) !important; }
html.dark .bg-green-50 { background-color: rgba(16,185,129,0.10) !important; }
html.dark .bg-purple-50 { background-color: rgba(139,92,246,0.10) !important; }
html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.10) !important; }
html.dark .bg-yellow-50 { background-color: rgba(245,158,11,0.08) !important; }
html.dark .bg-red-50 { background-color: rgba(239,68,68,0.08) !important; }
html.dark .bg-orange-50 { background-color: rgba(249,115,22,0.08) !important; }
html.dark .bg-green-100 { background-color: rgba(16,185,129,0.15) !important; }
html.dark .bg-blue-100 { background-color: rgba(59,130,246,0.15) !important; }
html.dark .bg-purple-100 { background-color: rgba(139,92,246,0.15) !important; }
html.dark .bg-yellow-100 { background-color: rgba(245,158,11,0.12) !important; }
html.dark .bg-red-100 { background-color: rgba(239,68,68,0.12) !important; }

/* ── Tailwind gradient overrides for dark mode (blue-tinted) ── */
html.dark .from-blue-50 { --tw-gradient-from: #0F1D3A !important; }
html.dark .from-purple-50 { --tw-gradient-from: #1A1037 !important; }
html.dark .from-green-50 { --tw-gradient-from: #042F1E !important; }
html.dark .from-indigo-50 { --tw-gradient-from: #141247 !important; }
html.dark .to-white { --tw-gradient-to: #111827 !important; }

/* ── Tailwind border overrides for dark mode ── */
html.dark .border-blue-100 { border-color: #1E3A5F !important; }
html.dark .border-blue-200 { border-color: #1E40AF !important; }
html.dark .border-purple-100 { border-color: #2E1065 !important; }
html.dark .border-green-100 { border-color: #14532D !important; }
html.dark .border-green-200 { border-color: rgba(16,185,129,0.2) !important; }
html.dark .border-blue-600 { border-color: #60A5FA !important; }
html.dark .hover\:bg-blue-50:hover { background-color: #0F1D3A !important; }

/* ── Tailwind text color overrides for dark mode ── */
html.dark .text-green-800 { color: #34D399 !important; }
html.dark .text-green-700 { color: #34D399 !important; }
html.dark .text-green-600 { color: #34D399 !important; }
html.dark .text-blue-600 { color: #60A5FA !important; }
html.dark .text-blue-700 { color: #60A5FA !important; }
html.dark .text-blue-800 { color: #60A5FA !important; }
html.dark .text-purple-600 { color: #A78BFA !important; }
html.dark .text-purple-700 { color: #A78BFA !important; }
html.dark .text-indigo-600 { color: #818CF8 !important; }
html.dark .text-indigo-700 { color: #818CF8 !important; }
html.dark .text-red-600 { color: #F87171 !important; }
html.dark .text-red-700 { color: #F87171 !important; }
html.dark .text-orange-600 { color: #FBBF24 !important; }
html.dark .text-yellow-600 { color: #FBBF24 !important; }

/* ── Ring overrides for dark mode ── */
html.dark .ring-gray-200 { --tw-ring-color: #1E293B !important; }
html.dark .ring-gray-300 { --tw-ring-color: #334155 !important; }
html.dark .focus\:ring-blue-500:focus { --tw-ring-color: #3B82F6 !important; }

/* ── Divide overrides for dark mode ── */
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #1E293B !important; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1E293B !important; }

/* ── Placeholder overrides ── */
html.dark .placeholder-gray-400::placeholder { color: #64748B !important; }
html.dark .placeholder-gray-500::placeholder { color: #64748B !important; }

/* ── Inline-styled lang dropdowns (shared across all pages) ── */
html.dark .lang-switcher button { color: #E2E8F0 !important; border-color: #334155 !important; }
html.dark #langDrop { background: #111827 !important; border-color: #1E293B !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; }
html.dark #langDrop button { color: #E2E8F0 !important; }
html.dark #langDrop button:hover { background: #1E293B !important; }

/* ── Form element overrides ── */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="url"],
html.dark input[type="number"],
html.dark textarea,
html.dark select {
  background-color: #111827;
  border-color: #1E293B;
  color: #E2E8F0;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748B;
}

/* ── Table overrides ── */
html.dark table th { background-color: #0F172A; color: #E2E8F0; border-color: #1E293B; }
html.dark table td { border-color: #1E293B; color: #CBD5E1; }
html.dark table tr:hover td { background-color: rgba(30,41,59,0.5); }
html.dark thead { background-color: #0F172A; }
html.dark tbody tr:nth-child(even) { background-color: rgba(15,23,42,0.3); }