:root {
  --bg-page: #f7f8fb;
  --bg-surface: #fcfdff;
  --bg-surface-strong: #f8fafd;
  --bg-surface-muted: #f1f4f9;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border-subtle: rgba(30, 41, 59, 0.09);
  --border-strong: rgba(30, 41, 59, 0.16);
  --glass-header-bg: rgba(252, 253, 255, 0.88);
  --glass-card-bg: rgba(252, 253, 255, 0.94);
  --shadow-soft: 0 10px 30px rgba(30, 41, 59, 0.07);
  --theme-color: #f8fafc;
  --offline-bg: #f8fafc;
  --offline-text: #0f172a;
  --offline-muted: #475569;
  --compat-text-strong: #1e293b;
  --compat-text-muted: #475569;
  --compat-bg-legacy: rgba(248, 250, 253, 0.92);
  --compat-bg-white-overlay: rgba(30, 41, 59, 0.045);
  --compat-border: rgba(30, 41, 59, 0.12);
  --compat-surface-text: #1e293b;
  --compat-consent-bg: rgba(252, 253, 255, 0.95);
  --compat-shadow: 0 10px 28px rgba(30, 41, 59, 0.1);
  --compat-progress-bg: rgba(30, 41, 59, 0.1);
}

html[data-theme="dark"] {
  --bg-page: #0f172a;
  --bg-surface: rgba(30, 41, 59, 0.7);
  --bg-surface-strong: rgba(15, 23, 42, 0.8);
  --bg-surface-muted: rgba(30, 41, 59, 0.5);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --glass-header-bg: rgba(15, 23, 42, 0.7);
  --glass-card-bg: rgba(30, 41, 59, 0.5);
  --shadow-soft: 0 20px 48px rgba(2, 6, 23, 0.35);
  --theme-color: #0f172a;
  --offline-bg: #0f172a;
  --offline-text: #e2e8f0;
  --offline-muted: #94a3b8;
}

html,
body {
  background: var(--bg-page);
  color: var(--text-primary);
}

body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

#theme-toggle-fab {
  bottom: calc(1rem + env(safe-area-inset-bottom));
  right: 1rem;
}

body.has-feedback-fab #theme-toggle-fab {
  left: 1rem;
  right: auto;
  bottom: calc(1rem + env(safe-area-inset-bottom));
}

#back-to-top-fab {
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 1rem;
}

@media (max-width: 639px) {
  body.has-feedback-fab #theme-toggle-fab {
    left: 1rem;
    right: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  body.has-mobile-cta-bar #theme-toggle-fab {
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }

  body.has-mobile-cta-bar #back-to-top-fab {
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }

  body.has-feedback-fab #back-to-top-fab {
    bottom: calc(5rem + env(safe-area-inset-bottom));
  }

  body.has-feedback-fab.has-mobile-cta-bar #theme-toggle-fab {
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }

  body.has-feedback-fab.has-mobile-cta-bar #back-to-top-fab {
    bottom: calc(9.75rem + env(safe-area-inset-bottom));
  }
}

.glass-header {
  background: var(--glass-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.glass-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

/* Semantic helpers for new/updated views */
.theme-text-primary { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-muted { color: var(--text-muted); }
.theme-bg-surface { background: var(--bg-surface); }
.theme-bg-muted { background: var(--bg-surface-muted); }
.theme-border-subtle { border-color: var(--border-subtle); }

/* Light theme compatibility layer for legacy dark utility classes */
html[data-theme="light"] .text-white,
html[data-theme="light"] .hover\:text-white:hover,
html[data-theme="light"] .group-hover\:text-white,
html[data-theme="light"] .label-text.text-slate-300,
html[data-theme="light"] .label-text.text-slate-400 {
  color: var(--compat-text-strong) !important;
}

html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-slate-600,
html[data-theme="light"] .text-slate-700 {
  color: var(--compat-text-muted) !important;
}

html[data-theme="light"] .sector-current-label {
  color: #065f46 !important;
}

html[data-theme="light"] .intelligent-privacy-claim {
  color: #065f46 !important;
}

html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-900\/50,
html[data-theme="light"] .bg-slate-900\/95,
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-800\/50,
html[data-theme="light"] .bg-slate-800\/60,
html[data-theme="light"] .bg-slate-800\/70,
html[data-theme="light"] .bg-slate-700,
html[data-theme="light"] .bg-slate-700\/50,
html[data-theme="light"] .bg-slate-600\/50,
html[data-theme="light"] .from-slate-900,
html[data-theme="light"] .to-slate-900,
html[data-theme="light"] .from-slate-800,
html[data-theme="light"] .to-slate-800 {
  background-color: var(--compat-bg-legacy) !important;
}

html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10,
html[data-theme="light"] .bg-white\/20 {
  background-color: var(--compat-bg-white-overlay) !important;
}

html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/20,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--compat-border) !important;
}

html[data-theme="light"] .before\:bg-white\/10::before,
html[data-theme="light"] .after\:bg-white\/10::after {
  background-color: var(--compat-border) !important;
}

html[data-theme="light"] .dropdown-content,
html[data-theme="light"] .menu,
html[data-theme="light"] .card,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .alert,
html[data-theme="light"] .select,
html[data-theme="light"] .input,
html[data-theme="light"] .file-input,
html[data-theme="light"] .textarea {
  color: var(--compat-surface-text);
}

html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-outline {
  color: var(--compat-surface-text);
}

html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .btn-outline:focus-visible {
  color: #fff !important;
}

html[data-theme="light"] #cookie-consent-banner {
  background: var(--compat-consent-bg) !important;
  border-top-color: var(--compat-border) !important;
}

html[data-theme="light"] #offline-indicator {
  background: rgba(245, 158, 11, 0.9);
  color: #451a03;
}

html[data-theme="light"] .shadow-2xl,
html[data-theme="light"] .shadow-xl,
html[data-theme="light"] .shadow-lg {
  box-shadow: var(--compat-shadow) !important;
}

html[data-theme="light"] .progress {
  background-color: var(--compat-progress-bg);
}

/* Softer primary accents in light mode */
html[data-theme="light"] .btn-primary {
  background: linear-gradient(180deg, #5f67e8 0%, #4f46e5 100%) !important;
  border-color: #5b5fd6 !important;
  color: #eef2ff !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.2) !important;
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-primary:focus-visible {
  background: linear-gradient(180deg, #545edd 0%, #4338ca 100%) !important;
  border-color: #5058cd !important;
}

html[data-theme="light"] .badge-primary {
  background-color: rgba(79, 70, 229, 0.12) !important;
  border-color: rgba(79, 70, 229, 0.22) !important;
  color: #434190 !important;
}

html[data-theme="light"] .progress-primary::-webkit-progress-value {
  background-color: #5b63df !important;
}

html[data-theme="light"] .progress-primary::-moz-progress-bar {
  background-color: #5b63df !important;
}

html[data-theme="light"] .file-input-primary {
  border-color: rgba(79, 70, 229, 0.45) !important;
}

html[data-theme="light"] .file-input-primary::file-selector-button {
  background: linear-gradient(180deg, #5f67e8 0%, #4f46e5 100%) !important;
  color: #eef2ff !important;
  border-color: #5b5fd6 !important;
}

/* Soften blue/brand blocks in light mode (cards, chips, outlines) */
html[data-theme="light"] .text-blue-400,
html[data-theme="light"] .text-blue-500 {
  color: #6b86bb !important;
}

html[data-theme="light"] .bg-blue-500\/10 {
  background-color: rgba(107, 134, 187, 0.1) !important;
}

html[data-theme="light"] .border-blue-500\/20 {
  border-color: rgba(107, 134, 187, 0.2) !important;
}

html[data-theme="light"] .border-blue-500\/30 {
  border-color: rgba(107, 134, 187, 0.28) !important;
}

html[data-theme="light"] .text-brand-primary {
  color: #5f67c9 !important;
}

html[data-theme="light"] .bg-brand-primary\/10 {
  background-color: rgba(95, 103, 201, 0.1) !important;
}

html[data-theme="light"] .bg-brand-primary\/20 {
  background-color: rgba(95, 103, 201, 0.16) !important;
}

html[data-theme="light"] .border-brand-primary,
html[data-theme="light"] .border-brand-primary\/20,
html[data-theme="light"] .border-brand-primary\/30 {
  border-color: rgba(95, 103, 201, 0.28) !important;
}

html[data-theme="light"] .shadow-brand-primary\/20,
html[data-theme="light"] .shadow-brand-primary\/30 {
  --tw-shadow-color: rgba(95, 103, 201, 0.22) !important;
}

html[data-theme="light"] .from-brand-primary\/80.to-indigo-400\/80 {
  background-image: linear-gradient(90deg, rgba(95, 103, 201, 0.88), rgba(127, 140, 214, 0.88)) !important;
}

/* ── Blog article prose — theme-aware via --tw-prose-* custom properties ── */
.blog-article {
  --tw-prose-body: var(--text-secondary);
  --tw-prose-headings: var(--text-primary);
  --tw-prose-lead: var(--text-secondary);
  --tw-prose-links: #22d3ee;
  --tw-prose-bold: var(--text-primary);
  --tw-prose-counters: var(--text-muted);
  --tw-prose-bullets: var(--text-muted);
  --tw-prose-hr: var(--border-strong);
  --tw-prose-quotes: var(--text-secondary);
  --tw-prose-quote-borders: rgba(34, 211, 238, 0.4);
  --tw-prose-captions: var(--text-muted);
  --tw-prose-code: #22d3ee;
  --tw-prose-pre-code: var(--text-secondary);
  --tw-prose-pre-bg: var(--bg-surface-muted);
  --tw-prose-th-borders: var(--border-subtle);
  --tw-prose-td-borders: var(--border-subtle);
}

/* In light mode brand-cyan (#22d3ee) has poor contrast on white — use a darker teal */
html[data-theme="light"] .blog-article {
  --tw-prose-links: #0891b2;
  --tw-prose-code: #0891b2;
  --tw-prose-quote-borders: rgba(8, 145, 178, 0.4);
}