/*
 * ZeroKeep — Public Pages Light/Dark Theme
 * Default: Light  |  html.dark = Dark mode
 * Toggle stored in localStorage key "zk-theme"
 */

/* ── Toggle button (in navbar) ─────────────────────────────── */
.theme-toggle-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    padding: 5px 9px;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    vertical-align: middle;
    line-height: 0;
}
.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
.theme-toggle-btn svg { display: block; }

/* In light mode the button is on a light navbar */
html.light .navbar.scrolled .theme-toggle-btn,
html.light .navbar:not(.transparent) .theme-toggle-btn {
    border-color: rgba(15,23,42,0.18);
    color: #374151;
}
html.light .navbar.scrolled .theme-toggle-btn:hover,
html.light .navbar:not(.transparent) .theme-toggle-btn:hover {
    background: rgba(15,23,42,0.06);
    color: #0f172a;
    border-color: rgba(15,23,42,0.3);
}
html.light .navbar.transparent .theme-toggle-btn {
    border-color: rgba(15,23,42,0.2);
    color: #374151;
}
html.light .navbar.transparent .theme-toggle-btn:hover {
    background: rgba(15,23,42,0.06);
    color: #0f172a;
}

/* Standalone toggle (auth pages top-right) */
.theme-toggle-fixed {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    line-height: 0;
}
.theme-toggle-fixed:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
html.light .theme-toggle-fixed {
    background: rgba(255,255,255,0.85);
    border-color: rgba(15,23,42,0.12);
    color: #374151;
    box-shadow: 0 2px 12px rgba(15,23,42,0.08);
}
html.light .theme-toggle-fixed:hover {
    background: #ffffff;
    color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — html.light overrides
   Palette:
     Body       #f4f6fb  (cool blue-gray wash)
     Nav        rgba(255,255,255,0.97) when scrolled
     Card       #ffffff  / hover #f7f9fc
     Text-1     #0f172a  (slate-950)
     Text-2     #475569  (slate-600)
     Text-3     #94a3b8  (slate-400, muted)
     Border     rgba(15,23,42,0.09)
     Primary    #e94560  (unchanged)
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS vars ────────────────────────────────────── */
html.light {
    --bg-dark:           #f4f6fb;
    --bg-dark-secondary: #eef1f8;
    --bg-dark-tertiary:  #e6eaf4;
    --text-primary:      #0f172a;
    --text-secondary:    rgba(15,23,42,0.65);
    --text-muted:        rgba(15,23,42,0.42);
    --border-light:      rgba(15,23,42,0.09);
    --surface-light:     #f4f6fb;
    --surface-gray:      #eef1f8;
    --primary-glow:      rgba(233,69,96,0.15);
    --accent-green:      #15803d;
    --accent:            #15803d;
}

/* ── Body ────────────────────────────────────────── */
html.light body {
    background: #f4f6fb;
    color: #0f172a;
}
html.light body::-webkit-scrollbar-track { background: #eef1f8; }
html.light body::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.35); }

/* ── Navbar ─────────────────────────────────────── */
html.light .navbar.transparent .navbar-brand,
html.light .navbar.transparent .navbar-brand:visited { color: #0f172a !important; }
html.light .navbar.transparent .navbar-brand svg { stroke: #e94560; }
html.light .navbar.transparent .nav-link { color: rgba(15,23,42,0.75) !important; }
html.light .navbar.transparent .nav-link:hover { color: #e94560 !important; }
html.light .navbar.transparent .navbar-toggler-icon { filter: invert(1) brightness(0); }
html.light .navbar.scrolled {
    background: rgba(255,255,255,0.97) !important;
    border-bottom: 1px solid rgba(15,23,42,0.09);
    box-shadow: 0 2px 20px rgba(15,23,42,0.07);
}
html.light .navbar.scrolled .navbar-brand { color: #0f172a !important; }
html.light .navbar.scrolled .nav-link { color: #374151 !important; }
html.light .navbar.scrolled .nav-link:hover { color: #e94560 !important; }
/* btn-nav-primary ha sfondo gradiente — testo sempre bianco in entrambi i temi */
html.light .navbar .nav-link.btn-nav-primary,
html.light .navbar .nav-link.btn-nav-primary:hover { color: white !important; }
html.light .navbar.transparent.menu-open { background: rgba(255,255,255,0.98) !important; }
html.light .navbar.transparent.menu-open .navbar-brand { color: #0f172a !important; }
html.light .navbar.transparent.menu-open .nav-link { color: rgba(15,23,42,0.8) !important; }
html.light .navbar.transparent.menu-open .nav-link:hover { color: #e94560 !important; }
html.light .navbar.transparent.menu-open .navbar-toggler-icon { filter: invert(1) brightness(0); }

/* ── Hero (index.html) ───────────────────────────── */
html.light .hero-section {
    background: linear-gradient(150deg, #f4f6fb 0%, #edf1fa 55%, #f2eef9 100%);
}
html.light .hero-grid {
    opacity: 0.35;
    background-image: radial-gradient(circle, rgba(15,23,42,0.18) 1px, transparent 1px) !important;
}
html.light .hero-orb { filter: blur(70px); opacity: 0.18; }
html.light .hero-noise { opacity: 0.01; }
html.light .hero-section::after { background: none; }
html.light .hero-badge {
    background: rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.12);
    color: #374151;
}
html.light .hero-badge::before { opacity: 0.6; }
html.light .hero-subtitle { color: rgba(15,23,42,0.62); }
html.light .hero-tag {
    background: rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.1);
    color: #475569;
}
html.light .hero-tag:hover {
    background: rgba(233,69,96,0.07);
    border-color: rgba(233,69,96,0.22);
    color: #e94560;
}

/* Hero card 3D */
html.light .hero-card {
    background: rgba(255,255,255,0.92);
    border-color: rgba(15,23,42,0.1);
    box-shadow: 0 24px 64px rgba(15,23,42,0.1), 0 4px 16px rgba(15,23,42,0.06);
}
html.light .hero-card-header {
    background: rgba(15,23,42,0.03);
    border-bottom-color: rgba(15,23,42,0.07);
}
html.light .hero-card-title { color: #374151; }
html.light .hero-card-dot { opacity: 0.5; }

/* ── Stats bar ───────────────────────────────────── */
html.light .stats-bar {
    background: rgba(255,255,255,0.82);
    border-color: rgba(15,23,42,0.09);
    box-shadow: 0 2px 24px rgba(15,23,42,0.05);
}
html.light .stat-number {
    background: linear-gradient(135deg, #0f172a 0%, #374151 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html.light .stat-label { color: #64748b; }
html.light .stat-divider { background: rgba(15,23,42,0.1); }

/* ── Features section ────────────────────────────── */
html.light .features-section { background: #f4f6fb; }
html.light .feature-card {
    background: #ffffff;
    box-shadow: 0 2px 16px rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.07);
}
html.light .feature-card:hover {
    box-shadow: 0 16px 48px rgba(15,23,42,0.1);
    border-color: transparent;
}
html.light .feature-card h3 { color: #0f172a; }
html.light .feature-card p { color: #64748b; }
html.light .feature-icon {
    background: rgba(233,69,96,0.07);
    border-color: rgba(233,69,96,0.14);
}

/* ── Services section ────────────────────────────── */
html.light .services-section {
    background: #ffffff;
}
html.light .services-section::before { opacity: 0.025; }

/* Section text */
html.light .section-title,
html.light h2.section-title,
html.light .section-subtitle { color: #0f172a; }
html.light p.section-subtitle { color: #64748b; }

/* Service cards / blocks */
html.light [class*="service-card"],
html.light [class*="service-item"] {
    background: #f4f6fb;
    border-color: rgba(15,23,42,0.08);
    color: #0f172a;
}

/* ── Contact section ─────────────────────────────── */
html.light .contact-section { background: #f4f6fb; }
html.light .contact-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 4px 20px rgba(15,23,42,0.06);
}
html.light .contact-card h4 { color: #0f172a; }
html.light .contact-info-card {
    background: #f4f6fb;
    border-color: rgba(15,23,42,0.08);
}
html.light .contact-info-card:hover {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(15,23,42,0.08);
}
html.light .contact-info-card h5 { color: #0f172a; }
html.light .contact-info-card p { color: #64748b; }

/* ── CTA section ─────────────────────────────────── */
/* dark mode: reduce intense glow from --primary-glow (0.4) */
.cta-section::before {
    background: radial-gradient(circle, rgba(233, 69, 96, 0.1) 0%, transparent 70%) !important;
}
html.light .cta-section::before {
    background: radial-gradient(circle, rgba(229, 88, 111, 0.19) 0%, transparent 70%) !important;
}
html.light .cta-section { background: var(--bg-dark-secondary); }
html.light .cta-box {
    background: #ffffff;
    border-color: rgba(15,23,42,0.09);
    box-shadow: 0 16px 48px rgba(15,23,42,0.07);
}
html.light .cta-title { color: #0f172a; }
html.light .cta-subtitle { color: #64748b; }
html.light .cta-input {
    background: #f4f6fb;
    border-color: rgba(15,23,42,0.14);
    color: #0f172a;
}
html.light .cta-input::placeholder { color: #94a3b8; }
html.light .cta-input:focus { background: #fff; border-color: #e94560; }

/* ── Footer — stays dark for contrast ───────────── */
/* (intentional — common pattern, good UX anchor) */

/* ═══════════════════ PRICING PAGE ══════════════════ */
html.light .pricing-hero-section,
html.light .pricing-header { color: #0f172a; }

/* Section headers */
html.light .section-header h2 { color: #0f172a; }
html.light .section-header p { color: #64748b; }

/* Storage type buttons */
html.light .storage-type-btn,
html.light #stGeo, html.light #stStd {
    background: rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.12);
    color: #374151;
}
html.light .storage-type-btn.active,
html.light #stGeo.active, html.light #stStd.active {
    background: rgba(233,69,96,0.08);
    border-color: rgba(233,69,96,0.28);
    color: #e94560;
}

/* Pricing cards */
html.light .pricing-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.09);
    box-shadow: 0 4px 20px rgba(15,23,42,0.05);
    color: #0f172a;
}
html.light .pricing-card:hover {
    box-shadow: 0 16px 48px rgba(15,23,42,0.1);
    border-color: rgba(15,23,42,0.14);
}
html.light .pricing-card .plan-name { color: #0f172a; }
html.light .pricing-card .plan-tagline,
html.light .pricing-card .plan-price-label,
html.light .pricing-card li { color: #64748b; }
html.light .pricing-card .plan-price { color: #0f172a; }
html.light .pricing-card .plan-price .price-period { color: #94a3b8; }

/* Section headers */
html.light .section-badge-std,
html.light .section-badge-geo { opacity: 0.9; }
html.light .pricing-section-header h3 { color: #0f172a; }

/* Calculator */
html.light .calc-section { background: #eef1f8; }
html.light .calc-container {
    background: #ffffff;
    border-color: rgba(15,23,42,0.09);
    box-shadow: 0 8px 32px rgba(15,23,42,0.07);
}
html.light .calc-label,
html.light .calc-storage-val,
html.light #calcStorageVal { color: #0f172a; }
html.light .calc-bw-label,
html.light .calc-section-label { color: #475569; }
html.light .bw-opt {
    background: #f4f6fb;
    border-color: rgba(15,23,42,0.1);
    color: #374151;
}
html.light .bw-opt:hover { background: rgba(233,69,96,0.05); border-color: rgba(233,69,96,0.2); color: #e94560; }
html.light .bw-opt.active { background: rgba(233,69,96,0.08); border-color: rgba(233,69,96,0.3); color: #e94560; }
html.light .bw-opt-sub { color: #94a3b8; }
html.light .calc-result {
    background: #f4f6fb;
    border-color: rgba(15,23,42,0.09);
}
html.light #calcPrice,
html.light .calc-price { color: #0f172a; }
html.light #calcPricePeriod,
html.light .calc-price-period { color: #64748b; }
html.light #calcResConfig { color: #64748b; }
html.light .calc-billing-toggle { color: #374151; }
html.light .billing-toggle span { color: rgba(15,23,42,0.6); }
html.light .billing-toggle span.active { color: #0f172a; }
html.light .toggle-switch {
    background: rgba(15,23,42,0.08);
    border-color: rgba(15,23,42,0.15);
}
html.light #bwStdNote { color: #64748b; }

/* Slider */
html.light .cslider-track { background: rgba(15,23,42,0.1); }
html.light .cslider-thumb { box-shadow: 0 0 0 4px rgba(233,69,96,0.12), 0 4px 14px rgba(233,69,96,0.18); }
html.light .cslider-label { color: #64748b; }
html.light .cslider-label.active { color: #e94560; }

/* FAQ */
html.light .faq-section { background: #f4f6fb; }
html.light .faq-item {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
}
html.light .faq-item.active { border-color: rgba(233,69,96,0.22); }
html.light .faq-question { color: #0f172a; }
html.light .faq-question svg { color: #94a3b8; }
html.light .faq-answer { color: #64748b; }

/* CTA pricing */
html.light .pricing-cta-section { background: var(--bg-dark-secondary); }

/* ═══════════════════ AUTH PAGES ══════════════════════ */

/* Wave background */
html.light .bg-gradient-top {
    background: radial-gradient(ellipse at center,
        rgba(233,69,96,0.09) 0%,
        rgba(100,80,200,0.06) 45%,
        transparent 70%);
}
html.light .bg-wave-1 path { fill: rgba(233,69,96,0.07); }
html.light .bg-wave-2 path { fill: rgba(80,80,220,0.045); }

/* Back to home button */
html.light .back-home {
    background: rgba(255,255,255,0.88);
    color: #374151;
    border-color: rgba(15,23,42,0.1);
    box-shadow: 0 2px 8px rgba(15,23,42,0.07);
}
html.light .back-home:hover { background: #ffffff; color: #0f172a; }

/* Logo */
html.light .auth-logo a { color: #0f172a; }
html.light .auth-logo svg { stroke: #0f172a; }
html.light .auth-logo span { color: #0f172a; }

/* Steps */
html.light .step-dot { background: rgba(15,23,42,0.15); }
html.light .step-dot.active { background: #e94560; }

/* Top back button */
html.light .btn-back { color: rgba(15,23,42,0.45); }
html.light .btn-back:hover { color: #0f172a; }

/* Form card */
html.light .auth-form-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.14);
    box-shadow:
        0 4px 6px rgba(15,23,42,0.06),
        0 12px 32px rgba(15,23,42,0.10),
        0 32px 64px rgba(15,23,42,0.08);
}
html.light .auth-form-card::before { opacity: 0.18; }
html.light .auth-form-header h1 { color: #0f172a; }
html.light .auth-form-header p { color: #64748b; }

/* Inputs */
html.light .form-label { color: #374151; }
html.light .form-label-optional { color: #94a3b8; }
html.light .form-input {
    background: #f4f6fb;
    border-color: rgba(15,23,42,0.13);
    color: #0f172a;
}
html.light .form-input:focus { background: #ffffff; border-color: #e94560; color: #0f172a; }
html.light .form-input::placeholder { color: #94a3b8; }
html.light .form-input-icon { color: rgba(15,23,42,0.32); }
html.light .form-help { color: #94a3b8; }
html.light .password-toggle { color: rgba(15,23,42,0.4); }
html.light .password-toggle:hover { color: #0f172a; }
html.light .form-terms-text { color: #64748b; }
html.light .form-terms-text a { color: #e94560; }

/* Divider + footer */
html.light .form-divider::before { background: rgba(15,23,42,0.1); }
html.light .form-divider span { background: rgba(255,255,255,0.96); color: #94a3b8; }
html.light .form-footer,
html.light .form-footer p { color: #64748b; }
html.light .form-footer a { color: #e94560; }

/* Strength bars */
html.light .strength-bar { background: rgba(15,23,42,0.1); }
html.light .strength-text { color: #94a3b8; }

/* ── Recap slide ─────────────────────────────────── */
html.light .recap-header h1 { color: #0f172a; }
html.light .recap-header p { color: #64748b; }
html.light .recap-footer { color: #94a3b8; }
html.light .recap-footer a { color: #e94560; }
html.light .recap-spec-cell {
    background: rgba(15,23,42,0.03);
    border-color: rgba(15,23,42,0.07);
}
html.light .recap-spec-label { color: rgba(15,23,42,0.38); }
html.light .recap-spec-value { color: #0f172a; }
html.light .recap-breakdown { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.07); }
html.light .recap-divider { background: rgba(15,23,42,0.08); }
html.light .recap-features li { color: rgba(15,23,42,0.62); }

/* ── Payment column ──────────────────────────────── */
html.light .pay-col-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.09);
    box-shadow: 0 4px 20px rgba(15,23,42,0.05);
}
html.light .pay-section-label { color: rgba(15,23,42,0.45); }
html.light .payment-label { color: #374151; }
html.light .payment-input {
    background: #f4f6fb;
    border-color: rgba(15,23,42,0.13);
    color: #0f172a;
}
html.light .sec-badge { color: #64748b; border-color: rgba(15,23,42,0.12); }

/* ── Other public pages ──────────────────────────── */
html.light .section-label { color: var(--primary); }


/* ═══════════════════ LIGHT MODE — ADDITIONAL FIXES ══════════════════ */

/* ── Hero title & buttons ─────────────────────────── */
html.light .hero-title { color: #0f172a; }

html.light .btn-hero-secondary {
    background: rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.14);
    color: #374151;
}
html.light .btn-hero-secondary:hover {
    background: rgba(15,23,42,0.09);
    border-color: rgba(15,23,42,0.22);
    color: #0f172a;
}

/* Hero card file list — white text invisible on white card */
html.light .hero-card-file-name { color: #1e293b; }
html.light .hero-card-file-icon svg { stroke: #64748b; }
html.light .hero-card-meta { color: rgba(15,23,42,0.52); }

/* ── Elements with color: var(--bg-dark) as heading color ─ */
/* In light mode --bg-dark = #f4f6fb (near-white) → override */
html.light .service-card h3,
html.light .contact-card h4,
html.light .contact-info-card h5 { color: #0f172a; }

/* Feature + service icon glow — already reduced via --primary-glow,
   explicit override for certainty */
html.light .feature-icon { box-shadow: 0 4px 16px rgba(233,69,96,0.12); }
html.light .contact-info-icon { box-shadow: 0 3px 12px rgba(233,69,96,0.12); }

/* ── Pricing page ─────────────────────────────────── */
/* Pricing hero glow orb (::before) too intense in light */
html.light .pricing-hero::before { opacity: 0.08; }

/* Billing toggle text */
html.light .billing-toggle-label,
html.light .billing-label { color: #374151; }

/* Plan section badge headers */
html.light .pricing-type-header h2,
html.light .pricing-type-header h3 { color: #0f172a; }

/* ── Register page — plan chips ───────────────────── */
/* Chips are semi-transparent on dark bg; add stronger border in light */
html.light .plan-chip.chip-free { border-color: rgba(233,69,96,0.4); }
html.light .plan-chip.chip-pro  { border-color: rgba(74,158,255,0.4); }
html.light .plan-chip.chip-biz  { border-color: rgba(0,217,163,0.35); }
html.light .plan-chip.chip-custom {
    background: rgba(138,99,210,0.1);
    color: #6d28d9;
    border: 1px solid rgba(138,99,210,0.4);
}

/* ── Auth pages — form sections ───────────────────── */
html.light .pay-col-card h3,
html.light .pay-col-card h4 { color: #0f172a; }
html.light .recap-card-name { color: #0f172a; }
html.light .recap-card-tagline { color: #64748b; }
html.light .recap-breakdown-row { color: #374151; }
html.light .recap-breakdown-total { color: #0f172a; }

/* Pay unavailable banner */
html.light .pay-unavailable-banner {
    background: rgba(15,23,42,0.04);
    border-color: rgba(15,23,42,0.1);
    color: #475569;
}

/* ═══════════════ PRICING — STD GREEN IN LIGHT MODE ══════════════ */
/* #64e096 (neon green) has poor contrast on white — use deeper tones */
html.light .pricing-type-header.std .pricing-type-icon { color: #15803d; background: rgba(21,128,61,0.1); }
html.light .pricing-type-badge.std { background: rgba(21,128,61,0.09); color: #15803d; }
html.light .card-type-badge.std    { background: rgba(21,128,61,0.09); color: #15803d; }
html.light .st-opt-badge.std       { background: rgba(21,128,61,0.09); color: #15803d; }
html.light .sp-card.std .sp-card-badge  { background: rgba(21,128,61,0.09); color: #15803d; }
html.light .bw-std-note strong { color: #15803d; }

/* ═══════════════ DOCUMENTATION — FLOW DIAGRAM PANELS ═══════════ */
html.light .flow-container {
    background: #ffffff;
    border-color: rgba(15,23,42,0.09);
    box-shadow: 0 4px 24px rgba(15,23,42,0.07);
}
html.light .flow-container .flow-title { color: #0f172a; }
html.light .flow-container .fullscreen-btn {
    color: #475569;
    background: rgba(15,23,42,0.04);
    border-color: rgba(15,23,42,0.12);
}
html.light .flow-container .fullscreen-btn:hover {
    color: #0f172a;
    background: rgba(15,23,42,0.08);
}
/* SVGs have inline background:#0a0a12 — remove it in light mode */
html.light .flow-container svg { background: transparent !important; }

/* ── Security card title icons — remove dark bg in light mode ── */
html.light .security-card h3 svg {
    background: rgba(74,158,255,0.1) !important;
    box-shadow: none !important;
}
html.light .security-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
}
html.light .security-card h3 { color: #0f172a; }
html.light .security-card p { color: #64748b; }
html.light .security-card li { color: #64748b; }
html.light .security-card li::before {
    box-shadow: 0 2px 8px rgba(21,128,61,0.15);
}
html.light .security-card li::after {
    border-right-color: white;
    border-bottom-color: white;
}

/* ═════════════ CONSISTENT GREEN — all public pages in light mode ══════════
   Replace neon greens (#64e096, #00d9a3, #10b981) with #15803d (forest green)
   ═══════════════════════════════════════════════════════════════════════════ */

/* roadmap.html — accent-green used for timeline dots, completed states */
html.light .roadmap-timeline::before,
html.light .timeline-dot.completed,
html.light .timeline-dot.current { background: #15803d; box-shadow: none; }
html.light .milestone-status.completed { color: #15803d; }
html.light .status-completed { color: #15803d; background: rgba(21,128,61,0.1); }

/* register.html — biz plan (#00d9a3) + STD plan (#64e096) colors */
html.light .plan-card.plan-biz.selected {
    border-color: #15803d;
    box-shadow: 0 0 0 1px rgba(21,128,61,0.2), 0 12px 40px rgba(21,128,61,0.08);
}
html.light .plan-biz .plan-icon  { background: rgba(21,128,61,0.1);  color: #15803d; }
html.light .plan-biz .plan-badge-sel { background: rgba(21,128,61,0.1); color: #15803d; border-color: rgba(21,128,61,0.25); }
html.light .plan-biz .plan-price { color: #15803d; }
html.light .plan-biz .plan-features li svg { color: #15803d; }


/* index.html — hero card file status (#10b981) */
html.light .hero-card-file-status { color: #15803d; }
html.light .hero-card-file-status svg { stroke: #15803d; }

/* guida-utente.html — accent-green references */
html.light [style*="accent-green"],
html.light [style*="00d9a3"],
html.light [style*="10b981"] { color: #15803d !important; }

/* ═════════════ PRICING — REMAINING HARDCODED GREENS ══════════════ */

/* Section banner (left border + bg tint) */
html.light .pricing-type-header.std {
    border-left-color: #15803d !important;
    background: rgba(21,128,61,0.05) !important;
}

/* Bandwidth notes (bw-std-note, bw-onboarding-note) */
html.light .bw-std-note,
html.light .bw-onboarding-note {
    background: rgba(21,128,61,0.05) !important;
    border-color: rgba(21,128,61,0.18) !important;
}
html.light .bw-std-note strong,
html.light .bw-onboarding-note strong,
html.light .bw-std-note.accent-primary strong { color: #15803d !important; }

/* Storage philosophy cards — STD type */
html.light .sp-card.std::before {
    background: radial-gradient(circle, rgba(21,128,61,0.07) 0%, transparent 70%) !important;
}
html.light .sp-card.std .sp-card-badge {
    background: rgba(21,128,61,0.09) !important;
    color: #15803d !important;
}
html.light .sp-card.std .sp-card-icon { background: rgba(21,128,61,0.1) !important; }
html.light .sp-card.std .sp-feature-icon { background: rgba(21,128,61,0.1) !important; }

/* SVG inline stroke/fill="#64e096" — CSS overrides presentation attributes */
html.light .sp-card.std svg { stroke: #15803d !important; }
html.light .sp-card.std svg circle[fill] { fill: #15803d !important; }

/* Small STD icon inside storage type option button */
html.light .st-opt svg[stroke="#64e096"] { stroke: #15803d !important; }

/* sp-card.std — more specific SVG overrides for nested elements */
html.light .sp-card.std .sp-feature-icon svg { stroke: #15803d !important; }
html.light .sp-card.std .sp-card-icon svg    { stroke: #15803d !important; }
html.light .sp-card.std .sp-card-icon svg circle {
    fill: #15803d !important;
    stroke: none !important;
}
/* st-opt badge icon (storage type selector button) */
html.light .st-opt#stStd svg { stroke: #15803d !important; }

/* ── pricing.html — STD plan grid toggle (pgt) light mode ────────────── */
/* Active button text "#64e096" is invisible on light bg → dark forest green */
html.light .pgt-btn.pgt-std.active        { color: #15803d; }
html.light .pgt-badge.std                 { color: #15803d; background: rgba(21,128,61,0.1); border-color: rgba(21,128,61,0.2); }
html.light .pgt-indicator.std             { background: rgba(21,128,61,0.1); border-color: rgba(21,128,61,0.2); }
html.light .pgt-btn.pgt-geo.active        { color: #1e6fab; }
html.light .pgt-badge.geo                 { color: #1e6fab; background: rgba(30,111,171,0.1); border-color: rgba(30,111,171,0.2); }
html.light .pgt-indicator.geo             { background: rgba(30,111,171,0.1); border-color: rgba(30,111,171,0.2); }
/* SVG inside STD pgt button (stroke/fill="#64e096") */
html.light .pgt-btn.pgt-std svg           { stroke: #15803d !important; }
html.light .pgt-btn.pgt-std svg [fill="#64e096"] { fill: #15803d !important; }

/* billing toggle switch track too light on light bg */
html.light .toggle-switch {
    background: rgba(15,23,42,0.12);
    border-color: rgba(15,23,42,0.2);
}

/* ── Scrolled navbar: white bg in BOTH modes — always show dark toggle ── */
/* Ensure white background on all pages in all themes */
.navbar.scrolled {
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
.navbar.scrolled .theme-toggle-btn,
.navbar:not(.transparent) .theme-toggle-btn {
    border-color: rgba(15,23,42,0.18);
    color: #374151;
    background: rgba(15,23,42,0.04);
}
.navbar.scrolled .theme-toggle-btn:hover,
.navbar:not(.transparent) .theme-toggle-btn:hover {
    background: rgba(15,23,42,0.09);
    color: #0f172a;
    border-color: rgba(15,23,42,0.28);
}
/* Mobile menu-open state also gets white bg */
.navbar.transparent.menu-open .theme-toggle-btn {
    border-color: rgba(15,23,42,0.18);
    color: #374151;
}

/* ═════════════ PRICING — GEO TYPE (#64c8ff → dark blue in light mode) ══════ */

/* Section banner header */
html.light .pricing-type-header.geo {
    border-left-color: #1e6fab !important;
    background: rgba(30,111,171,0.05) !important;
}
html.light .pricing-type-header.geo .pricing-type-icon {
    color: #1e6fab !important;
    background: rgba(30,111,171,0.1) !important;
}

/* Type badge on pricing cards */
html.light .pricing-type-badge.geo { background: rgba(30,111,171,0.09) !important; color: #1e6fab !important; }
html.light .card-type-badge.geo    { background: rgba(30,111,171,0.09) !important; color: #1e6fab !important; }

/* Storage type option badge */
html.light .st-opt-badge.geo { background: rgba(30,111,171,0.09) !important; color: #1e6fab !important; }

/* Storage philosophy geo card */
html.light .sp-card.geo::before {
    background: radial-gradient(circle, rgba(30,111,171,0.07) 0%, transparent 70%) !important;
}
html.light .sp-card.geo .sp-card-badge  { background: rgba(30,111,171,0.09) !important; color: #1e6fab !important; }
html.light .sp-card.geo .sp-card-icon   { background: rgba(30,111,171,0.1) !important; }
html.light .sp-card.geo .sp-feature-icon { background: rgba(30,111,171,0.1) !important; }

/* SVG stroke="#64c8ff" → dark blue */
html.light .sp-card.geo .sp-feature-icon svg { stroke: #1e6fab !important; }
html.light .sp-card.geo .sp-card-icon svg    { stroke: #1e6fab !important; }
html.light .st-opt#stGeo svg { stroke: #1e6fab !important; }

/* ── guida-utente.html — hardcoded white icon colors ──────────────────── */
html.light .feature-icon svg { stroke: #e94560 !important; color: #e94560 !important; }
/* section-icon uses currentColor on some SVGs; var(--primary) on others  */
html.light .section-icon { color: #475569 !important; }

/* ── documentation.html — doc-nav title icons (fill: white) ───────────── */
html.light .doc-nav-title svg { fill: #64748b !important; }

/* ── documentation.html — security-icon svg in api-cards ──────────────── */
/* CSS rule forces stroke:white on all .security-icon svgs; in light mode
   api-card variants have light bg (var(--bg-dark-secondary)) so white is invisible */
html.light .security-icon svg { stroke: var(--primary) !important; }

/* api-card bg uses CSS vars → light in light mode; fix border too */
html.light .api-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 2px 16px rgba(15,23,42,0.05);
}
html.light .api-card:hover {
    border-color: rgba(233,69,96,0.25);
    box-shadow: 0 12px 32px rgba(233,69,96,0.1);
}

/* security-badge border (rgba white → invisible in light) */
html.light .security-badge {
    background: rgba(15,23,42,0.04);
    border-color: rgba(15,23,42,0.14);
}

/* api-endpoint bg */
html.light .api-endpoint {
    background: #f8fafc;
    border-color: rgba(15,23,42,0.08);
}

/* stat-card bg */
html.light .stat-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 2px 12px rgba(15,23,42,0.05);
}

/* security-icon inline-style border (rgba white → invisible) */
html.light .security-icon[style] {
    border-color: rgba(15,23,42,0.1) !important;
    background: rgba(233,69,96,0.07) !important;
}

/* ── Footer — light mode ──────────────────────────────────────────────── */
/* .footer-brand and .footer-title use hardcoded color:white — fix in light */
html.light .footer {
    background: var(--bg-dark);
    border-top-color: rgba(15,23,42,0.09);
}
html.light .footer-brand { color: #0f172a; }
html.light .footer-title  { color: #0f172a; }

/* Social icons: white-glass bg is invisible on light surface */
html.light .social-icon {
    background: rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.1);
}
html.light .social-icon svg { fill: rgba(15,23,42,0.55); }
html.light .social-icon:hover svg { fill: white; }

/* footer-bottom divider */
html.light .footer-bottom {
    border-top-color: rgba(15,23,42,0.09);
}

/* ── Globe: brighten in light mode ──────────────────────────── */
html.light #heroGlobe {
    filter: brightness(1.8) contrast(0.80) saturate(0.7);
}