/* ═══════════════════════════════════════════════════════
   style_theme.css — light/dark mode
   Load LAST on every page (after all page-specific CSS)
   ═══════════════════════════════════════════════════════ */

/* ── NAV ACTIONS WRAPPER ── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    color: var(--muted);
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.theme-toggle:hover {
    color: var(--white);
    border-color: rgba(0,212,255,0.4);
    background: rgba(0,212,255,0.05);
}

.theme-toggle svg { display: block; pointer-events: none; }

/* Dark mode (default): sun visible, moon hidden */
.icon-moon { display: none; }
.icon-sun  { display: block; }


/* ══════════════════════════════════════════════════════
   LIGHT MODE
   ══════════════════════════════════════════════════════ */

/* ── Variables ── */
[data-theme="light"] {
    --black:   #f0f7fa;
    --white:   #0d1e2c;
    --accent:  #0092b3;
    --accent2: #8c1ec2;
    --accent3: #188a3e;
    --mid:     #e0edf5;
    --mid2:    #d3e6f0;
    --muted:   #4d7a8a;
    --border:  rgba(0,146,179,0.2);
    --border2: rgba(0,146,179,0.1);
}

/* Light: moon visible, sun hidden */
[data-theme="light"] .icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: none; }

/* ── Nav ── */
[data-theme="light"] nav             { background: rgba(240,247,250,0.95); }
[data-theme="light"] .nav-drawer     { background: rgba(240,247,250,0.99); }

/* ── Noise overlay ── */
[data-theme="light"] body::before    { opacity: 0.12; }

/* ── Secondary / body copy (all the hardcoded #7aa8bc / #6a9ab0) ── */
[data-theme="light"] .hero-sub,
[data-theme="light"] .section-body,
[data-theme="light"] .section-block p,
[data-theme="light"] .origin-content p,
[data-theme="light"] .milestone-text,
[data-theme="light"] .trust-section > p,
[data-theme="light"] .arch-section > p,
[data-theme="light"] .deploy-card p,
[data-theme="light"] .tip-callout p,
[data-theme="light"] .poc-section p,
[data-theme="light"] .cta-strip p,
[data-theme="light"] .contact-info p,
[data-theme="light"] .expect-text,
[data-theme="light"] .form-success p,
[data-theme="light"] .step p,
[data-theme="light"] .vertical-stat,
[data-theme="light"] .table-section .sub,
[data-theme="light"] .comparison-table td { color: #2c5570; }

[data-theme="light"] .poc-step p,
[data-theme="light"] .fractal-node-desc,
[data-theme="light"] .table-note        { color: var(--muted); }

/* ── Pull quote ── */
[data-theme="light"] .pull-quote {
    background: rgba(0,146,179,0.06);
    border-left-color: var(--accent);
}

/* ── Result callout ── */
[data-theme="light"] .result-callout            { background: var(--mid); border-color: var(--border); }
[data-theme="light"] .result-callout p          { color: #2c5570 !important; }
[data-theme="light"] .result-callout strong     { color: var(--accent) !important; }

/* ── Cards / nodes ── */
[data-theme="light"] .fractal-node              { background: var(--mid); }
[data-theme="light"] .fractal-node:hover        { background: #cde0ec; }
[data-theme="light"] .deploy-card               { background: var(--mid); }
[data-theme="light"] .deploy-card:hover         { border-color: rgba(0,146,179,0.35); box-shadow: 0 0 28px rgba(0,146,179,0.07); }
[data-theme="light"] .step                      { background: var(--mid); }
[data-theme="light"] .step:hover                { border-color: rgba(0,146,179,0.35); box-shadow: 0 0 30px rgba(0,146,179,0.07); }
[data-theme="light"] .logo-cell                 { background: var(--mid); }
[data-theme="light"] .logo-cell:hover           { background: #cde0ec; }
[data-theme="light"] .logo-cell-inner           { background: rgba(0,146,179,0.15); }
[data-theme="light"] .logo-pill                 { background: rgba(0,146,179,0.1); border-color: rgba(0,146,179,0.15); }
[data-theme="light"] .stat-cell                 { background: var(--mid); }
[data-theme="light"] .trust-stat                { background: var(--mid); }

/* ── Tip callout ── */
[data-theme="light"] .tip-callout {
    background: rgba(0,146,179,0.05);
    border-color: var(--border);
    border-left-color: var(--accent);
}

/* ── Tables ── */
[data-theme="light"] .comparison-table td:first-child              { color: var(--white); }
[data-theme="light"] .comparison-table tbody td:nth-child(2)       { color: #2c5570; }
[data-theme="light"] .comparison-table tbody td:nth-child(3)       { background: rgba(0,146,179,0.05); border-left-color: var(--border); }
[data-theme="light"] .comparison-table thead th:nth-child(3)       { background: rgba(0,146,179,0.05); border-left-color: var(--border); }
[data-theme="light"] .comparison-table tr:hover td                 { background: rgba(0,146,179,0.04); }
[data-theme="light"] .comparison-table tr:hover td:nth-child(3)    { background: rgba(0,146,179,0.09); }

/* ── Contact form ── */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea     { background: var(--mid2); border-color: var(--border); color: var(--white); }
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
    border-color: rgba(0,146,179,0.55);
    box-shadow: 0 0 0 3px rgba(0,146,179,0.1);
}
[data-theme="light"] .intent-option input[type="radio"]:checked + label {
    background: rgba(0,146,179,0.1);
    border-color: rgba(0,146,179,0.4);
    color: var(--accent);
}
[data-theme="light"] .expect-item:hover       { background: rgba(0,146,179,0.04); }

/* ── Buttons ── */
[data-theme="light"] .btn-primary             { background: var(--accent); color: #f0f7fa; }
[data-theme="light"] .btn-primary:hover       { background: #00a8d0; box-shadow: 0 0 24px rgba(0,146,179,0.35); }
[data-theme="light"] .btn-ghost               { color: var(--white); border-color: var(--border); }
[data-theme="light"] .btn-ghost:hover         { border-color: rgba(0,146,179,0.5); background: rgba(0,146,179,0.07); color: var(--accent); }