/* ==========================================================
   AG102 Site-Wide Light Theme Overrides
   Covers styles.css hardcoded dark colors for ALL pages.
   Uses :root:not(.theme-dark) scoping — no JS toggle needed.
   Loaded AFTER styles.css on every page.
   ========================================================== */


/* ── SECTION 1: Variable Overrides ── */
:root:not(.theme-dark) {
  /* Backgrounds */
  --bg-dark: #F5F0EB;
  --bg-card: #FFFFFF;

  /* Text — WCAG AAA on #F5F0EB */
  --text-primary: #1A1A1A;
  --text-secondary: #3D2B1F;
  --text-muted: #A89B93;

  /* Brand */
  --primary-green: #8B4513;
  --accent-gold: #B85042;
  --accent-green: #4A7C59;

  /* Borders */
  --border-color: #E5E0DB;

  /* Pillar colors — deepened one shade for light-bg contrast */
  --stability: #2563EB;
  --mobility: #059669;
  --strength: #DC2626;
  --power: #D97706;
  --cardio: #7C3AED;
  --cognition: #DB2777;
  --bodycomp: #0891B2;
  --surveys: #65A30D;
}


/* ── SECTION 2: Body & Background Grid ── */
:root:not(.theme-dark) body {
  background: var(--ag-bg, #F5F0EB) !important;
  color: #3D2B1F !important;
}

:root:not(.theme-dark) .bg-grid {
  background-image:
    linear-gradient(rgba(45, 27, 20, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 27, 20, 0.03) 1px, transparent 1px) !important;
}


/* ── SECTION 3: Hardcoded Border Overrides ── */
:root:not(.theme-dark) .pillar-badge,
:root:not(.theme-dark) .feature-card,
:root:not(.theme-dark) .main-score,
:root:not(.theme-dark) .pillar-card,
:root:not(.theme-dark) .tracking-card,
:root:not(.theme-dark) .activity-card,
:root:not(.theme-dark) .modal,
:root:not(.theme-dark) .subscription-info,
:root:not(.theme-dark) .test-item,
:root:not(.theme-dark) .walkthrough-section,
:root:not(.theme-dark) .assessment-selector,
:root:not(.theme-dark) #btn-manage-subscription,
:root:not(.theme-dark) .form-group input,
:root:not(.theme-dark) .form-group select,
:root:not(.theme-dark) .user-menu-btn {
  border-color: var(--ag-border, #E5E0DB) !important;
}

:root:not(.theme-dark) .activity-card:hover {
  border-color: var(--ag-primary, #8B4513) !important;
}

:root:not(.theme-dark) .tracking-item,
:root:not(.theme-dark) .subscription-row:not(:last-child) {
  border-bottom-color: rgba(45, 27, 20, 0.08) !important;
}

:root:not(.theme-dark) .activity-actions {
  border-top-color: rgba(45, 27, 20, 0.08) !important;
}


/* ── SECTION 4: Hardcoded Background Overrides ── */
:root:not(.theme-dark) .walkthrough-section,
:root:not(.theme-dark) .subscription-details,
:root:not(.theme-dark) .activity-status {
  background: rgba(45, 27, 20, 0.02) !important;
}

:root:not(.theme-dark) .form-group input,
:root:not(.theme-dark) .form-group select {
  background: var(--ag-bg-alt, #FAF7F4) !important;
  color: var(--text-primary) !important;
}

:root:not(.theme-dark) .form-group select option {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
}

:root:not(.theme-dark) .assessment-selector {
  background: var(--ag-bg-alt, #FAF7F4) !important;
  color: var(--text-primary) !important;
}

:root:not(.theme-dark) .assessment-selector option {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
}

:root:not(.theme-dark) #btn-manage-subscription {
  background: rgba(45, 27, 20, 0.03) !important;
}

:root:not(.theme-dark) #btn-manage-subscription:hover {
  background: rgba(45, 27, 20, 0.06) !important;
}

:root:not(.theme-dark) .section-title .badge {
  background: var(--ag-bg-alt, #FAF7F4) !important;
}

:root:not(.theme-dark) .hide-walkthrough-btn:hover {
  background: rgba(45, 27, 20, 0.04) !important;
}


/* ── SECTION 5: Modal Backgrounds ── */
:root:not(.theme-dark) .modal-overlay {
  background: rgba(45, 27, 20, 0.5) !important;
}

:root:not(.theme-dark) .modal {
  background: #FFFFFF !important;
  box-shadow: var(--ag-shadow-lg, 0 4px 16px rgba(45, 27, 20, 0.12));
}


/* ── SECTION 6: Hero Section ── */
:root:not(.theme-dark) .hero h1 {
  background: linear-gradient(135deg, #1A1A1A 0%, #4A3728 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

:root:not(.theme-dark) .hero-logo {
  box-shadow: 0 20px 60px rgba(139, 69, 19, 0.15) !important;
}


/* ── SECTION 7: Button Overrides ── */
:root:not(.theme-dark) .btn-large,
:root:not(.theme-dark) .btn-submit {
  background: linear-gradient(135deg, #8B4513, #D4A574) !important;
  color: #FFFFFF !important;
}

:root:not(.theme-dark) .btn-large:hover,
:root:not(.theme-dark) .btn-submit:hover {
  box-shadow: 0 10px 30px rgba(139, 69, 19, 0.25) !important;
}

:root:not(.theme-dark) .btn-primary {
  background: linear-gradient(135deg, #8B4513, #D4A574) !important;
  color: #FFFFFF !important;
}

:root:not(.theme-dark) .btn-outline {
  border: 2px solid var(--ag-border, #E5E0DB) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}

:root:not(.theme-dark) .btn-outline:hover {
  border-color: var(--ag-primary, #8B4513) !important;
  color: var(--ag-primary, #8B4513) !important;
  background: rgba(139, 69, 19, 0.05) !important;
}

:root:not(.theme-dark) .auth-switch button {
  color: var(--ag-primary, #8B4513) !important;
}

:root:not(.theme-dark) .forgot-password button:hover {
  color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 8: Score Ring & Pillar Details ── */
:root:not(.theme-dark) .ring-bg {
  stroke: var(--ag-border, #E5E0DB) !important;
}

:root:not(.theme-dark) .level-badge {
  background: rgba(184, 80, 66, 0.1) !important;
  border-color: rgba(184, 80, 66, 0.25) !important;
}

:root:not(.theme-dark) .level-badge .text {
  color: var(--ag-accent, #B85042) !important;
}

:root:not(.theme-dark) .pillar-bar {
  background: rgba(45, 27, 20, 0.08) !important;
}

:root:not(.theme-dark) .focus-alert {
  color: #92400e !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}


/* ── SECTION 9: Activity Links ── */
:root:not(.theme-dark) .activity-link {
  color: var(--ag-primary, #8B4513) !important;
}

:root:not(.theme-dark) .activity-link:hover {
  color: var(--ag-accent, #B85042) !important;
}


/* ── SECTION 10: Coming Soon & Assessment Actions ── */
:root:not(.theme-dark) .coming-soon,
:root:not(.theme-dark) .assessment-actions {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.06), rgba(212, 165, 116, 0.08)) !important;
  border-color: rgba(139, 69, 19, 0.2) !important;
}

:root:not(.theme-dark) .coming-soon h3,
:root:not(.theme-dark) .assessment-actions h3 {
  color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 11: Messages ── */
:root:not(.theme-dark) .message.error {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #b91c1c !important;
}

:root:not(.theme-dark) .message.success {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #15803d !important;
}

:root:not(.theme-dark) .message.info {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #1d4ed8 !important;
}


/* ── SECTION 12: Spinner ── */
:root:not(.theme-dark) .spinner {
  border-color: rgba(45, 27, 20, 0.2) !important;
  border-top-color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 13: Nav Protection (keep dark) ── */
:root:not(.theme-dark) nav.site-nav {
  background: var(--ag-nav-bg, #0B1120) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

:root:not(.theme-dark) nav:not(.site-nav) {
  background: transparent !important;
  border-bottom: none !important;
}


/* ── SECTION 14: Pillar Modal & Test Detail ── */
:root:not(.theme-dark) .pillar-modal-header {
  border-bottom-color: var(--ag-border, #E5E0DB) !important;
}

:root:not(.theme-dark) .test-item {
  background: var(--ag-bg-alt, #FAF7F4) !important;
}

:root:not(.theme-dark) .test-item:nth-child(even) {
  background: #FFFFFF !important;
}

:root:not(.theme-dark) .test-item-clickable:hover {
  background: rgba(45, 27, 20, 0.04) !important;
  border-color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 15: Score / Value Cards ── */
:root:not(.theme-dark) .your-score-card,
:root:not(.theme-dark) .your-value-card {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.08), rgba(74, 124, 89, 0.08)) !important;
  border-color: rgba(139, 69, 19, 0.2) !important;
  box-shadow: var(--ag-shadow, 0 2px 8px rgba(45, 27, 20, 0.08)) !important;
}

:root:not(.theme-dark) .norms-table {
  background: var(--ag-bg-alt, #FAF7F4) !important;
}

:root:not(.theme-dark) .norms-table thead {
  background: rgba(139, 69, 19, 0.08) !important;
}

:root:not(.theme-dark) .norms-table th {
  color: var(--ag-primary, #8B4513) !important;
}

:root:not(.theme-dark) .norms-table td {
  border-bottom-color: var(--ag-border, #E5E0DB) !important;
}

:root:not(.theme-dark) .norms-table tr.user-row {
  background: rgba(139, 69, 19, 0.06) !important;
}

:root:not(.theme-dark) .norms-table-wrapper::after {
  background: linear-gradient(90deg, transparent, rgba(245, 240, 235, 0.9)) !important;
}


/* ── SECTION 16: Tracking Modal ── */
:root:not(.theme-dark) .tracking-modal-header p {
  color: var(--text-muted) !important;
}

:root:not(.theme-dark) .range-item,
:root:not(.theme-dark) .cutoff-item {
  background: rgba(45, 27, 20, 0.02) !important;
}

:root:not(.theme-dark) #trend-chart-container {
  background: rgba(45, 27, 20, 0.02) !important;
}


/* ── SECTION 17: Upgrade Modal & Premium ── */
:root:not(.theme-dark) .btn-upgrade,
:root:not(.theme-dark) .btn-upgrade-inline {
  background: linear-gradient(135deg, #D4A574, #E5C068) !important;
  color: #2D1B14 !important;
}

:root:not(.theme-dark) .promo-card {
  border-color: var(--ag-border, #E5E0DB) !important;
}

:root:not(.theme-dark) .upgrade-features {
  background: rgba(45, 27, 20, 0.03) !important;
}

:root:not(.theme-dark) .upgrade-modal-content h2 {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1A1A1A !important;
}

:root:not(.theme-dark) .upgrade-reason {
  color: #3D2B1F !important;
}

:root:not(.theme-dark) .upgrade-features h4 {
  color: #3D2B1F !important;
}

:root:not(.theme-dark) .pricing-option {
  background: #FFFFFF !important;
  border-color: rgba(45, 27, 20, 0.12) !important;
}

:root:not(.theme-dark) .pricing-option:hover {
  border-color: rgba(45, 27, 20, 0.25) !important;
}

:root:not(.theme-dark) .pricing-option.selected,
:root:not(.theme-dark) .pricing-option.recommended {
  border-color: var(--accent-gold, #D4A574) !important;
  background: rgba(212, 165, 116, 0.06) !important;
}

:root:not(.theme-dark) .pricing-option .plan-name {
  color: #3D2B1F !important;
}

:root:not(.theme-dark) .pricing-option .price {
  color: #1A1A1A !important;
}

:root:not(.theme-dark) .pricing-option .price span {
  color: #3D2B1F !important;
}

:root:not(.theme-dark) .btn-upgrade-later {
  border-color: rgba(45, 27, 20, 0.15) !important;
  color: #3D2B1F !important;
}

:root:not(.theme-dark) .btn-upgrade-later:hover {
  border-color: rgba(45, 27, 20, 0.3) !important;
  color: #1A1A1A !important;
}


/* ── SECTION 18: Course & Backcasting Modals ── */
:root:not(.theme-dark) .course-week-badge {
  background: var(--ag-primary, #8B4513) !important;
  color: #FFFFFF !important;
}

:root:not(.theme-dark) .backcasting-grid .age-label,
:root:not(.theme-dark) .backcasting-grid .grid-input {
  background: rgba(45, 27, 20, 0.03) !important;
  color: var(--text-primary) !important;
}

:root:not(.theme-dark) .backcasting-grid .grid-input:focus {
  border-color: var(--ag-primary, #8B4513) !important;
}


/* ── SECTION 19: Footer ── */
:root:not(.theme-dark) footer {
  border-top: 1px solid var(--ag-border, #E5E0DB);
}

:root:not(.theme-dark) footer a {
  color: var(--ag-primary, #8B4513) !important;
}

:root:not(.theme-dark) footer a:hover {
  color: var(--ag-accent, #B85042) !important;
  text-decoration: underline !important;
}

:root:not(.theme-dark) footer p,
:root:not(.theme-dark) footer .footer-text {
  color: #3D2B1F !important;
}

:root:not(.theme-dark) .hub-footer {
  border-top-color: var(--ag-border, #E5E0DB) !important;
}

:root:not(.theme-dark) .hub-footer a {
  color: var(--ag-primary, #8B4513) !important;
}

:root:not(.theme-dark) .hub-footer p {
  color: var(--ag-text-muted, #7A6B63) !important;
}


/* ── SECTION 20: Misc Text & Link Overrides ── */
:root:not(.theme-dark) .confidence-sources,
:root:not(.theme-dark) .test-modal-clinical,
:root:not(.theme-dark) .test-modal-trend,
:root:not(.theme-dark) .instructions-section,
:root:not(.theme-dark) .instructions-placeholder,
:root:not(.theme-dark) .video-placeholder {
  background: rgba(45, 27, 20, 0.02) !important;
  border-color: var(--ag-border, #E5E0DB) !important;
}

:root:not(.theme-dark) .disclaimer-overlay .disclaimer-popup {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--ag-border, #E5E0DB);
  box-shadow: var(--ag-shadow-lg, 0 4px 16px rgba(45, 27, 20, 0.12));
}


/* ── SECTION 21: Coming Soon Page ── */
:root:not(.theme-dark) .coming-soon-page h1 {
  color: var(--ag-text, #2D1B14) !important;
}

:root:not(.theme-dark) .coming-soon-page p {
  color: var(--ag-text-muted, #7A6B63) !important;
}