/*
 * EnergyStackHub — Light Theme Override
 * =======================================
 * Remaps dark "obsidian" design tokens to clean light equivalents.
 * Loaded AFTER page inline styles to cascade-override dark variables.
 *
 * Design direction: Stripe · Linear · Vercel
 * Generous white space, dark text on white, brand amber as accent.
 */

/* ═══════════════════════════════════════════════════
   1. REMAP DARK SURFACE TOKENS → LIGHT EQUIVALENTS
   ═══════════════════════════════════════════════════ */
:root {
    /* Obsidian (near-black) → warm white surfaces */
    --obsidian:          #FFFFFF;
    --obsidian-surface:  #F5F4F1;
    --obsidian-card:     #FFFFFF;
    --obsidian-border:   #E5E1D8;

    /* Text: was light-on-dark → dark-on-light */
    --obsidian-text:     #1A1714;
    --obsidian-muted:    #6B6560;

    /* pricing.html / other pages use alternate variable names */
    --stack-blue:        #FAFAF8;
    --teal:              #E07B39;   /* brand unchanged */
    --teal-dark:         #C4631F;
    --off-white:         #FAFAF8;
}

/* ═══════════════════════════════════════════════════
   2. HARDCODED RGBA-WHITE OVERLAYS (designed for dark bg)
   Replace with dark-on-light equivalents
   ═══════════════════════════════════════════════════ */

/* Tool cards (tab-kill section: "Replacing 8 tools") */
.tool-card {
    background: rgba(26, 23, 20, 0.04) !important;
    border: 1px solid rgba(26, 23, 20, 0.08) !important;
    color: var(--gray-600) !important;
}
.tool-card:hover {
    background: rgba(26, 23, 20, 0.07) !important;
    color: var(--gray-900) !important;
}

/* Cycle step time badge (sleep section) */
.cycle-step-time {
    background: rgba(26, 23, 20, 0.05) !important;
    color: var(--gray-500) !important;
}

/* ═══════════════════════════════════════════════════
   3. DASHBOARD CARD (hero visual)
   ═══════════════════════════════════════════════════ */
.dashboard-card-outer {
    background: #FAFAF8 !important;
    border: 1px solid #E5E1D8 !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.dashboard-metric {
    background: #FFFFFF !important;
    border-color: #EAE7E0 !important;
}

.dashboard-title {
    color: var(--gray-500) !important;
}

/* Metric values that had inline style="color:#F5F0EB" */
.dashboard-metric-value {
    color: var(--gray-900) !important;
}
/* Preserve positive (green) and alert (amber) overrides */
.dashboard-metric.positive .dashboard-metric-value {
    color: #16A34A !important;
}
.dashboard-metric.alert .dashboard-metric-value {
    color: var(--brand) !important;
}

.dashboard-metric-label,
.dashboard-metric-sub {
    color: var(--gray-500) !important;
}

.chart-container {
    background: #F5F4F1 !important;
    border-color: #E5E1D8 !important;
}

.chart-label {
    color: var(--gray-500) !important;
}

/* ═══════════════════════════════════════════════════
   4. HERO SECTION
   ═══════════════════════════════════════════════════ */
.hero {
    background: linear-gradient(
        160deg,
        #FFFFFF 0%,
        #FAF8F5 60%,
        #F5F1EB 100%
    ) !important;
}

.hero::before {
    background:
        radial-gradient(ellipse 60% 50% at 20% 50%, rgba(224,123,57,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 20%, rgba(224,123,57,0.04) 0%, transparent 60%) !important;
}

/* Hero eyebrow: brand-light (#F5A96A) is too pale on white */
.hero-eyebrow {
    color: var(--brand-dark) !important;
    background: rgba(224, 123, 57, 0.1) !important;
    border-color: rgba(224, 123, 57, 0.2) !important;
}

.hero-content h1 {
    color: var(--gray-900) !important;
}

.hero-content p {
    color: var(--gray-600) !important;
}

/* Outline button: light text/border for dark bg → dark on light */
.btn-outline {
    color: var(--gray-800) !important;
    border-color: var(--gray-300) !important;
    background: transparent !important;
}
.btn-outline:hover {
    color: var(--brand-dark) !important;
    border-color: rgba(224, 123, 57, 0.45) !important;
    background: rgba(224, 123, 57, 0.04) !important;
    transform: translateY(-2px);
}

/* Stats bar */
.stats-bar {
    border-top-color: var(--gray-200) !important;
}
.stat-label {
    color: var(--gray-500) !important;
}

/* ═══════════════════════════════════════════════════
   5. TAB KILL SECTION ("Replacing 8 tools")
   ═══════════════════════════════════════════════════ */
.tab-kill {
    background: #F5F4F1 !important;
}
.tab-kill h2 {
    color: var(--gray-900) !important;
}
.tab-kill-sub {
    color: var(--gray-500) !important;
}

/* ═══════════════════════════════════════════════════
   6. HOW IT WORKS — STEP NUMBERS
   Dark circle with light number → brand-tinted circle
   ═══════════════════════════════════════════════════ */
.step-number {
    background: var(--brand-faint) !important;
    color: var(--brand-dark) !important;
    border-color: var(--brand) !important;
}

/* ═══════════════════════════════════════════════════
   7. CALCULATOR HIGHLIGHT CARD
   ═══════════════════════════════════════════════════ */
.result-card.highlight {
    background: var(--brand-faint) !important;
    border-color: rgba(224, 123, 57, 0.2) !important;
}
.result-card.highlight .result-label {
    color: var(--brand-dark) !important;
}
.result-card.highlight .result-value {
    color: var(--brand-dark) !important;
}

/* ═══════════════════════════════════════════════════
   8. SLEEP / 24-7 SECTION
   ═══════════════════════════════════════════════════ */
.sleep-section {
    background: #FAFAF8 !important;
}
.sleep-content h2 {
    color: var(--gray-900) !important;
}
.sleep-content > p {
    color: var(--gray-600) !important;
}
.cycle-list li {
    color: var(--gray-600) !important;
}
.cycle-visual {
    background: #FFFFFF !important;
    border-color: #E5E1D8 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}
.cycle-header {
    color: var(--gray-400) !important;
}
.cycle-step-row {
    background: #F5F4F1 !important;
    border-color: #E5E1D8 !important;
}
.cycle-step-text {
    color: var(--gray-800) !important;
}

/* ═══════════════════════════════════════════════════
   9. COMPARISON CARD (new/EnergyStack side)
   ═══════════════════════════════════════════════════ */
.comparison-card.new {
    background: var(--brand-faint) !important;
    border-color: rgba(224, 123, 57, 0.2) !important;
}
.comparison-card.new h3 {
    color: var(--brand-dark) !important;
}
.comparison-card.new ul li {
    color: var(--gray-700) !important;
}
.comparison-card.new ul li::before {
    color: var(--brand) !important;
}

/* ═══════════════════════════════════════════════════
   10. NEWSLETTER SECTION
   ═══════════════════════════════════════════════════ */
.newsletter-section {
    background: #F5F4F1 !important;
    border-top-color: #E5E1D8 !important;
    border-bottom-color: #E5E1D8 !important;
}
.newsletter-title {
    color: var(--gray-900) !important;
}
.newsletter-desc,
.newsletter-bullets li {
    color: var(--gray-600) !important;
}
.newsletter-form input[type="email"] {
    background: #FFFFFF !important;
    border-color: #E5E1D8 !important;
    color: var(--gray-900) !important;
}
.newsletter-form input::placeholder {
    color: var(--gray-400) !important;
}
.newsletter-success {
    color: #15803D !important;
    background: rgba(22, 163, 74, 0.08) !important;
    border-color: rgba(22, 163, 74, 0.2) !important;
}
.newsletter-fine {
    color: var(--gray-500) !important;
}

/* Footer newsletter bar */
.footer-newsletter-bar {
    background: #F0EDE6 !important;
    border-top-color: #E5E1D8 !important;
    border-bottom-color: #E5E1D8 !important;
}
.footer-nl-label {
    color: var(--gray-600) !important;
}
.footer-nl-label strong {
    color: var(--gray-900) !important;
}
.footer-nl-form input[type="email"] {
    background: #FFFFFF !important;
    border-color: #E5E1D8 !important;
    color: var(--gray-900) !important;
}
.footer-nl-form input::placeholder {
    color: var(--gray-400) !important;
}
.footer-nl-success {
    color: #15803D !important;
}

/* ═══════════════════════════════════════════════════
   11. FINAL CTA SECTION
   Was obsidian (black) → clean light section with contrast
   ═══════════════════════════════════════════════════ */
.final-cta {
    background: #F5F1EB !important;
}
.final-cta::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(224,123,57,0.1) 0%, transparent 60%) !important;
}
.final-cta h2 {
    color: var(--gray-900) !important;
}
.final-cta p {
    color: var(--gray-600) !important;
}

/* btn-white was white-on-dark; now use brand as primary CTA */
.btn-white {
    background: var(--brand) !important;
    color: white !important;
    border-color: var(--brand) !important;
}
.btn-white:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    box-shadow: 0 8px 24px rgba(224, 123, 57, 0.35) !important;
    transform: translateY(-2px);
}

/* btn-outline-white → subtle outlined on light bg */
.btn-outline-white {
    color: var(--gray-800) !important;
    border-color: var(--gray-300) !important;
}
.btn-outline-white:hover {
    color: var(--brand-dark) !important;
    border-color: rgba(224, 123, 57, 0.45) !important;
    background: rgba(224, 123, 57, 0.04) !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   12. FOOTER
   ═══════════════════════════════════════════════════ */
footer {
    background: #F5F4F1 !important;
    border-top-color: #E5E1D8 !important;
}
.footer-column h4 {
    color: var(--gray-800) !important;
}
.footer-column ul li a {
    color: var(--gray-500) !important;
}
.footer-column ul li a:hover {
    color: var(--gray-900) !important;
}
.footer-brand p {
    color: var(--gray-500) !important;
}
.social-icon {
    background: #FFFFFF !important;
    border-color: #E5E1D8 !important;
    color: var(--gray-500) !important;
}
.social-icon:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: white !important;
}
.footer-bottom {
    border-top-color: #E5E1D8 !important;
}
.footer-bottom-left {
    color: var(--gray-500) !important;
}
.footer-bottom-left a {
    color: var(--gray-500) !important;
}
.footer-bottom-left a:hover {
    color: var(--gray-800) !important;
}

/* Logo wordmark in footer (had inline dark overrides) */
footer .logo-wordmark {
    color: var(--gray-900) !important;
}

/* ═══════════════════════════════════════════════════
   13. PROFESSIONAL PORTAL (app shell)
   These pages use darker design tokens too
   ═══════════════════════════════════════════════════ */
.sidebar {
    background: #FAFAF8 !important;
    border-right-color: #E5E1D8 !important;
}
.sidebar-item {
    color: var(--gray-700) !important;
}
.sidebar-item.active,
.sidebar-item:hover {
    background: #EFE9E0 !important;
    color: var(--gray-900) !important;
}

/* ═══════════════════════════════════════════════════
   14. HARDCODED DARK NAVBARS
   Many pages have: nav { background: rgba(12,10,9,0.92) }
   Override to transparent/white nav
   ═══════════════════════════════════════════════════ */
nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
nav a,
nav .nav-logo-text,
.nav-logo span {
    color: var(--gray-900) !important;
}
.nav-logo .brand-word {
    color: var(--brand) !important;
}

/* ═══════════════════════════════════════════════════
   15. INLINE-STYLE DARK SECTIONS (footer CTAs, etc.)
   Pattern: <section style="background:#0C0A09;border-top:1px solid #302A24;...">
   ═══════════════════════════════════════════════════ */
[style*="background:#0C0A09"],
[style*="background: #0C0A09"],
[style*="background:var(--obsidian)"],
[style*="background: var(--obsidian)"],
[style*="background: var(--stack-blue)"] {
    background: #F0EDE6 !important;
    border-top-color: #E5E1D8 !important;
    border-bottom-color: #E5E1D8 !important;
}

/* Text inside those inline-styled sections */
[style*="background:#0C0A09"] h2,
[style*="background:#0C0A09"] h3,
[style*="background:#0C0A09"] p,
[style*="background: #0C0A09"] h2,
[style*="background: #0C0A09"] h3,
[style*="background: #0C0A09"] p {
    color: var(--gray-900) !important;
}

/* ═══════════════════════════════════════════════════
   16. AUDIT.HTML & OTHER PAGES WITH DARK BODY
   ═══════════════════════════════════════════════════ */
body {
    background: var(--white, #FFFFFF) !important;
    color: var(--gray-900, #1A1714) !important;
}

/* ═══════════════════════════════════════════════════
   17. GENERIC DARK CLASS FALLBACKS
   ═══════════════════════════════════════════════════ */
.audit-cta,
.dark-section {
    background: #F5F4F1 !important;
    color: var(--gray-900) !important;
}

/* Any heading/text that was explicitly white */
.section-dark h2,
.section-dark p,
.section-dark h3 {
    color: var(--gray-900) !important;
}

/* ═══════════════════════════════════════════════════
   GLOBAL FOOTER AI DISCLAIMER BANNER
   ═══════════════════════════════════════════════════ */
.site-ai-disclaimer-banner {
    background: #FFF8E1;
    border-top: 1px solid #F9A825;
    padding: 0.875rem 2rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #5D3A00;
    line-height: 1.5;
}
.site-ai-disclaimer-banner a {
    color: #0D47A1;
    font-weight: 600;
    text-decoration: none;
}
.site-ai-disclaimer-banner a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════
   OUTPUT-LEVEL AI DISCLAIMER (inline notices)
   ═══════════════════════════════════════════════════ */
.output-ai-notice {
    background: #FFF3E0;
    border: 1px solid #FFCC80;
    border-left: 3px solid #E07B39;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #5D3A00;
    line-height: 1.5;
    margin: 0.75rem 0;
}
.output-ai-notice strong {
    color: #BF360C;
}