/* FBR automatic theme: light from 07:00 to 19:59, dark the rest of the day. */
:root {
  --auto-bg: #f4f7fb;
  --auto-surface: #ffffff;
  --auto-surface-soft: #edf3fa;
  --auto-text: #10233d;
  --auto-muted: #52647c;
  --auto-border: #cbd8e7;
  --auto-shadow: 0 16px 34px rgba(24, 53, 83, .12);
}

html.theme-light { color-scheme: light; }
html.theme-dark {
  color-scheme: dark;
  --auto-bg: #06101d;
  --auto-surface: #0d1d31;
  --auto-surface-soft: #132842;
  --auto-text: #f5f8fc;
  --auto-muted: #b4c2d4;
  --auto-border: #29445f;
  --auto-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}

html.theme-light,
html.theme-light body {
  background: var(--auto-bg) !important;
  color: var(--auto-text) !important;
}

html.theme-dark,
html.theme-dark body {
  background: var(--auto-bg) !important;
  color: var(--auto-text) !important;
}

/* Form and storefront pages use these local variables. */
html.theme-light {
  --bg: #f4f7fb;
  --bg-0: #f5f7fb;
  --bg-1: #eaf0f8;
  --bg-2: #dce7f4;
  --bg-card: rgba(255, 255, 255, .92);
  --bg-input: #ffffff;
  --surface: rgba(255, 255, 255, .9);
  --line: rgba(25, 57, 89, .16);
  --text: #10233d;
  --muted: #52647c;
  --ink: #10233d;
  --paper: #f4f7fb;
  --paper-strong: #ffffff;
  --fbr-bg: #f4f7fb;
  --fbr-bg-soft: #e8f0fa;
  --fbr-surface: #ffffff;
  --fbr-surface-soft: #edf3fa;
  --fbr-border: #cbd8e7;
  --fbr-text: #10233d;
  --fbr-text-soft: #52647c;
}

html.theme-dark {
  --bg: #06101d;
  --bg-0: #06101d;
  --bg-1: #0a1a2d;
  --bg-2: #102840;
  --bg-card: rgba(13, 29, 49, .94);
  --bg-input: #10243b;
  --surface: rgba(13, 29, 49, .9);
  --line: rgba(192, 214, 237, .18);
  --text: #f5f8fc;
  --muted: #b4c2d4;
  --ink: #f5f8fc;
  --ink-soft: #c3cfdd;
  --paper: #06101d;
  --paper-strong: #0d1d31;
  --fbr-bg: #06101d;
  --fbr-bg-soft: #0d1d31;
  --fbr-surface: #10243b;
  --fbr-surface-soft: #132b47;
  --fbr-border: #29445f;
  --fbr-text: #f5f8fc;
  --fbr-text-soft: #b4c2d4;
}

/* Shared readable surfaces. */
html.theme-light :is(.topbar, .header, .header-fbr, .glass-card, .card, .top-card, .tcard, .formulario, .dias, .nivel-card, .steps, .progress-wrapper, .recu-card, .coach-login-card, .about-panel, .article, .related, .post-card, .headline-stack, .more-links a) {
  background-color: var(--auto-surface) !important;
  border-color: var(--auto-border) !important;
  box-shadow: var(--auto-shadow) !important;
}

html.theme-dark :is(.topbar, .header, .header-fbr, .glass-card, .card, .top-card, .tcard, .formulario, .dias, .nivel-card, .steps, .progress-wrapper, .recu-card, .coach-login-card, .about-panel, .article, .related, .post-card, .headline-stack, .more-links a) {
  background-color: var(--auto-surface) !important;
  border-color: var(--auto-border) !important;
  box-shadow: var(--auto-shadow) !important;
}

html.theme-light :is(h1, h2, h3, h4, h5, h6, label, legend, th, strong, b, .logo-wrap span, .menu-nav button, .menu-nav a, .home-panel-title, .home-plan-support-text) {
  color: var(--auto-text) !important;
}

html.theme-dark :is(h1, h2, h3, h4, h5, h6, label, legend, th, strong, b, .logo-wrap span, .menu-nav button, .menu-nav a, .home-panel-title, .home-plan-support-text) {
  color: var(--auto-text) !important;
}

html.theme-light :is(p, li, td, small, .muted, .lead, .footer, .card-body p, .home-plan-support-text) {
  color: var(--auto-muted);
}

html.theme-dark :is(p, li, td, small, .muted, .lead, .footer, .card-body p, .home-plan-support-text) {
  color: var(--auto-muted);
}

html.theme-light :is(input, select, textarea) {
  background: #ffffff !important;
  border-color: var(--auto-border) !important;
  color: var(--auto-text) !important;
}

html.theme-dark :is(input, select, textarea) {
  background: #10243b !important;
  border-color: var(--auto-border) !important;
  color: var(--auto-text) !important;
}

html.theme-light :is(input, textarea)::placeholder { color: #73849b !important; }
html.theme-dark :is(input, textarea)::placeholder { color: #91a4ba !important; }

/* Secondary actions must never inherit white text on a white surface. */
html.theme-light :is(.btn:not(.btn-primary), .btn-ghost, .btn-hero-ghost) {
  background: rgba(255, 255, 255, .94) !important;
  border-color: #aebed0 !important;
  color: #10233d !important;
}

html.theme-light :is(.btn:not(.btn-primary), .btn-ghost, .btn-hero-ghost):hover {
  background: #e9f1fb !important;
  border-color: #5d7fa5 !important;
  color: #071a30 !important;
}

html.theme-dark :is(.btn:not(.btn-primary), .btn-ghost, .btn-hero-ghost) {
  background: #17314f !important;
  border-color: #507094 !important;
  color: #f7fbff !important;
}

html.theme-dark :is(.btn:not(.btn-primary), .btn-ghost, .btn-hero-ghost):hover {
  background: #234466 !important;
  border-color: #86a7ca !important;
  color: #ffffff !important;
}

/* Text-only controls and numeric summaries that had fixed white text. */
html.theme-light .faq-item > button,
html.theme-light .kpi-value,
html.theme-light .billing-toggle span.active {
  color: #10233d !important;
}

html.theme-light .kpi-value {
  background: none !important;
  -webkit-text-fill-color: #10233d !important;
}

html.theme-dark .faq-item > button,
html.theme-dark .kpi-value,
html.theme-dark .billing-toggle span.active {
  color: #f5f8fc !important;
}

html.theme-dark .kpi-value {
  -webkit-text-fill-color: transparent;
}

html.theme-light .success-filter {
  background: rgba(255, 255, 255, .94) !important;
  border-color: #aebed0 !important;
  color: #10233d !important;
}

html.theme-light .success-filter.active {
  background: rgba(255, 110, 64, .16) !important;
  border-color: rgba(212, 79, 25, .58) !important;
  color: #9c3411 !important;
}

html.theme-dark .success-filter {
  background: #17314f !important;
  border-color: #507094 !important;
  color: #f5f8fc !important;
}

html.theme-dark .success-filter.active {
  background: rgba(255, 110, 64, .22) !important;
  border-color: rgba(255, 143, 111, .7) !important;
  color: #ffd5c7 !important;
}

/* Mobile navigation icon inherits its bars from currentColor. */
html.theme-light .mobile-menu-toggle {
  background: #ffffff !important;
  border-color: #90a6bd !important;
  color: #10233d !important;
}

html.theme-dark .mobile-menu-toggle {
  background: #17314f !important;
  border-color: #507094 !important;
  color: #f7fbff !important;
}

/* Welcome page needs explicit treatment because it has its own inline theme. */
html.theme-light .fbr-root { color: var(--auto-text); }
html.theme-light .topbar { background: rgba(255, 255, 255, .94) !important; }
html.theme-light .menu-nav button,
html.theme-light .menu-nav a { color: #24405f !important; }
html.theme-light .hero-letter { color: #10233d !important; text-shadow: none !important; }
html.theme-light .hero-letter.brand-letter { color: #d94c16 !important; }
html.theme-light .home-goal-card strong { color: #10233d !important; text-shadow: none !important; }
html.theme-light .home-goal-card { border-color: rgba(16, 35, 61, .2) !important; }
html.theme-light .lead-story :is(strong, small, em),
html.theme-light .plan-promo :is(h3, span, p) { color: #ffffff !important; }

html.theme-dark .fbr-root { color: var(--auto-text); }
html.theme-dark .topbar { background: rgba(7, 18, 33, .93) !important; }
html.theme-dark .menu-nav button,
html.theme-dark .menu-nav a { color: #d5e1ef !important; }
html.theme-dark .hero-letter { color: #f5f8fc !important; }
html.theme-dark .home-goal-card strong { color: #ffffff !important; }
html.theme-dark .lead-story :is(strong, small, em),
html.theme-dark .plan-promo :is(h3, span, p) { color: #ffffff !important; }

/* Blog and race map expose their colours as variables. */
html.theme-light .journal-intro > p:last-child,
html.theme-light .race-map-copy > p:not(.eyebrow) { color: var(--auto-muted) !important; }
html.theme-dark .journal-intro > p:last-child,
html.theme-dark .race-map-copy > p:not(.eyebrow),
html.theme-dark .article p,
html.theme-dark .article li { color: var(--auto-muted) !important; }

html.theme-dark .lead-story,
html.theme-dark .plan-promo,
html.theme-dark .race-map-visual { background-color: #102f59; }

/* Leaflet map keeps map tiles untouched, only the FBR interface changes. */
html.theme-dark .app-shell,
html.theme-dark .panel,
html.theme-dark .hero,
html.theme-dark .filters-panel,
html.theme-dark .leaflet-popup-content-wrapper,
html.theme-dark .leaflet-popup-tip { background: var(--auto-surface) !important; color: var(--auto-text) !important; border-color: var(--auto-border) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}