/* ============================================================
   DARK MODE
   Purely additive: every rule here is scoped under
   :root[data-theme="dark"], which is higher-specificity than the
   plain selectors in abc.css/styles.css, so this file can sit last
   and override them without editing a single existing rule.
   Toggled by templates/includes/theme-toggle.jinja (persists to
   localStorage; layouts set the attribute before first paint to
   avoid a flash of the wrong theme).
   ============================================================ */

:root {
    color-scheme: light;

    --surface-page: #ffffff;
    --surface-card: #ffffff;
    --surface-muted: var(--tbhi-soft, #f7f4fb);
    --surface-border: #efeaf6;
    --surface-border-strong: #e2dcec;

    --text-heading: var(--tbhi-ink, #1a1430);
    --text-body: #5b5470;
    --text-muted: #8a83a0;
    --text-faint: #a59fb6;

    --accent-purple: #1E075F;
    --accent-magenta: #9D328C;
    --accent-teal: #4893A4;
    --accent-pink: #F46388;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --surface-page: #15111f;
    --surface-card: #1d1830;
    --surface-muted: #221b38;
    --surface-border: #332a52;
    --surface-border-strong: #3e3260;

    --text-heading: #f4f1fb;
    --text-body: #c7c1da;
    --text-muted: #9791b3;
    --text-faint: #7a7398;

    /* lightened brand hues so purple/magenta text stays readable on a
       dark page - the originals remain unchanged for gradients/badges,
       which stay just as dark (and just as readable) in either theme */
    --accent-purple: #b7a3ff;
    --accent-magenta: #e496d6;
    --accent-teal: #8adbea;
    --accent-pink: #ff9db8;
}

/* ---- base ---- */
:root[data-theme="dark"] body { background: var(--surface-page); color: var(--text-body); }
:root[data-theme="dark"] a { color: var(--accent-magenta); }
:root[data-theme="dark"] a:hover { color: var(--accent-pink); }
:root[data-theme="dark"] hr { background-color: var(--surface-border); }
:root[data-theme="dark"] ::selection { background: var(--accent-magenta); color: #fff; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6,
:root[data-theme="dark"] .title, :root[data-theme="dark"] .subtitle,
:root[data-theme="dark"] .typo { color: var(--text-heading); }

/* ---- bulma primitives used across the site ---- */
:root[data-theme="dark"] .navbar:not(.primary) { background: var(--surface-card); }
:root[data-theme="dark"] .navbar-item, :root[data-theme="dark"] .navbar-link { color: var(--text-body); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .box, :root[data-theme="dark"] .notification,
:root[data-theme="dark"] .modal-card-body, :root[data-theme="dark"] .dropdown-content {
    background: var(--surface-card);
    color: var(--text-body);
}
:root[data-theme="dark"] .input, :root[data-theme="dark"] .textarea, :root[data-theme="dark"] .select select {
    background: var(--surface-card);
    color: var(--text-heading);
    border-color: var(--surface-border-strong);
}
:root[data-theme="dark"] .input::placeholder, :root[data-theme="dark"] .textarea::placeholder { color: var(--text-muted); }
:root[data-theme="dark"] .icon.is-left, :root[data-theme="dark"] .control.has-icons-left .icon { color: var(--text-muted); }
:root[data-theme="dark"] .table { background: var(--surface-card); color: var(--text-body); }
:root[data-theme="dark"] .table thead th { color: var(--text-heading); }
:root[data-theme="dark"] .table td, :root[data-theme="dark"] .table th, :root[data-theme="dark"] .table tr { border-color: var(--surface-border); }
:root[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(even) { background: var(--surface-muted); }
:root[data-theme="dark"] .button.button.tertiary { background-color: var(--surface-card); color: var(--text-heading); }
:root[data-theme="dark"] .donate-card { background-color: var(--surface-card); color: var(--text-body); }
:root[data-theme="dark"] .donate-card:hover { background-color: var(--surface-muted); }
:root[data-theme="dark"] .donate-card.active { background-color: var(--accent-magenta); color: #fff; }
:root[data-theme="dark"] .donate-card.active p.typo.text { color: #fff; }

/* ---- shared page furniture (banner, eyebrow, downloads band) ---- */
:root[data-theme="dark"] .banner { color: var(--accent-purple); }
:root[data-theme="dark"] .eyebrow { background: rgba(228, 150, 214, .14); color: var(--accent-magenta); }
:root[data-theme="dark"] .downloads-band { background-color: var(--surface-muted) !important; }

/* ---- landing page ---- */
:root[data-theme="dark"] .section-title, :root[data-theme="dark"] .lp-hero__title { color: var(--accent-purple); }
:root[data-theme="dark"] .lp-hero__title .hl { color: var(--accent-magenta); }
:root[data-theme="dark"] .section-sub, :root[data-theme="dark"] .lp-hero__sub, :root[data-theme="dark"] .lp-trust p {
    color: var(--text-body);
}
:root[data-theme="dark"] .lp-float { background: rgba(29, 24, 48, .94); }
:root[data-theme="dark"] .lp-float strong { color: var(--text-heading); }
:root[data-theme="dark"] .lp-float span { color: var(--text-muted); }

:root[data-theme="dark"] .filter-chip {
    background: var(--surface-card);
    border-color: var(--surface-border-strong);
    color: var(--text-body);
}
:root[data-theme="dark"] .filter-chip:hover { color: var(--accent-magenta); border-color: var(--accent-magenta); }
:root[data-theme="dark"] .filter-chip.is-active { color: #fff; }

:root[data-theme="dark"] .project-card, :root[data-theme="dark"] .dir-card,
:root[data-theme="dark"] .step, :root[data-theme="dark"] .donate-form-card {
    background: var(--surface-card);
    border-color: var(--surface-border);
}
:root[data-theme="dark"] .project-card__title, :root[data-theme="dark"] .dir-card__title, :root[data-theme="dark"] .step h3 {
    color: var(--text-heading);
}
:root[data-theme="dark"] .project-card__loc, :root[data-theme="dark"] .donate-project__loc,
:root[data-theme="dark"] .progress-text, :root[data-theme="dark"] .donate-form-card__head p,
:root[data-theme="dark"] .donate-form-card__foot {
    color: var(--text-muted);
}
:root[data-theme="dark"] .project-card__summary, :root[data-theme="dark"] .step p, :root[data-theme="dark"] .dir-card__text,
:root[data-theme="dark"] .donate-project__summary, :root[data-theme="dark"] .donate-intro__sub,
:root[data-theme="dark"] .needs-intro__sub, :root[data-theme="dark"] .needs-journey p {
    color: var(--text-body);
}
:root[data-theme="dark"] .needs-label, :root[data-theme="dark"] .needs-section-label { color: var(--text-faint); }
:root[data-theme="dark"] .progress-rail { background: var(--surface-border); }
:root[data-theme="dark"] .needs-journey li::before, :root[data-theme="dark"] .needs-divider {
    background: var(--surface-border);
    border-color: var(--surface-border);
}
:root[data-theme="dark"] .tag-urgent { background: var(--surface-card); }
:root[data-theme="dark"] .cta--light { background: var(--surface-card); color: var(--accent-purple); }
:root[data-theme="dark"] .need-chip.is-time, :root[data-theme="dark"] .card-cta--time {
    background: rgba(138, 219, 234, .16);
    color: var(--accent-teal);
}
:root[data-theme="dark"] .need-chip.is-materials { background: rgba(228, 150, 214, .16); color: var(--accent-magenta); }

/* ---- donate pages (hands.html / hearts.html) ---- */
:root[data-theme="dark"] .donate-project__title, :root[data-theme="dark"] .donate-intro__title,
:root[data-theme="dark"] .needs-intro__title, :root[data-theme="dark"] .donate-form-card__head h2 {
    color: var(--accent-purple);
}
:root[data-theme="dark"] .donate-points li, :root[data-theme="dark"] .donate-form-card .label,
:root[data-theme="dark"] .needs-journey strong {
    color: var(--text-heading);
}
:root[data-theme="dark"] .donate-back, :root[data-theme="dark"] .dir-card__link, :root[data-theme="dark"] .donate-form-card__foot a {
    color: var(--accent-magenta);
}
:root[data-theme="dark"] .donate-back:hover, :root[data-theme="dark"] .dir-card__link:hover { color: var(--accent-purple); }
:root[data-theme="dark"] .donate-form-card .input, :root[data-theme="dark"] .donate-form-card .textarea,
:root[data-theme="dark"] .donate-form-card .select select, :root[data-theme="dark"] .seg button {
    background: var(--surface-card);
    border-color: var(--surface-border-strong);
    color: var(--text-body);
}
:root[data-theme="dark"] .seg button:hover { color: var(--accent-magenta); border-color: var(--accent-magenta); }
:root[data-theme="dark"] .seg button.is-active { color: #fff; }

/* ---- light/dark asset swap (financing.html "keep the lights on" illustrations) ---- */
:root[data-theme="dark"] .theme-img--light { display: none; }
:root[data-theme="dark"] .theme-img--dark { display: inline; }

/* ---- portal (portal.jinja / layouts/inside.jinja / portal/*.html) ---- */
:root[data-theme="dark"] .portal-band { background-color: var(--surface-muted); }
:root[data-theme="dark"] .dotted-divider { border-bottom-color: var(--surface-border-strong); }
:root[data-theme="dark"] .color-primary { color: var(--accent-purple) !important; }
:root[data-theme="dark"] .color-secondary { color: var(--accent-pink) !important; }

/* ---- toggle control itself ---- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
}
.theme-toggle .material-symbols-rounded { font-size: 1.4rem; }