:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --white: #17141d;
    --purple-100: #362844;
    --gold-100: #473713;
    --green-100: #173b2b;
    --gray-050: #201c27;
    --gray-100: #302a38;
    --gray-300: #51495b;
    --ink-900: #f4f0f8;
    --ink-700: #ddd7e5;
    --ink-600: #c1b9cc;
    --ink-500: #a79eaf;
}

html[data-theme="dark"] body {
    background: #17141d;
    color: #ddd7e5;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] label,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] dt,
html[data-theme="dark"] dd {
    color: #f4f0f8;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .intro p,
html[data-theme="dark"] .status-card p,
html[data-theme="dark"] .details dt,
html[data-theme="dark"] .currency-note,
html[data-theme="dark"] .privacy,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .bottom-link {
    color: #c1b9cc;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .mobile-nav,
html[data-theme="dark"] .prog-card,
html[data-theme="dark"] .involve-card,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .story-slide,
html[data-theme="dark"] .story-arrow,
html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .mobile-nav-close,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .amount-option,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .details,
html[data-theme="dark"] .definition,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .login-card {
    background-color: #211c28;
    color: #ddd7e5;
    border-color: #393242;
}

html[data-theme="dark"] .section.bg-gray,
html[data-theme="dark"] .action-panel,
html[data-theme="dark"] .check-row,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .table-wrap {
    background-color: #1d1923;
    color: #ddd7e5;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .site-header {
    border-color: #393242;
}

html[data-theme="dark"] .nav-links a.top-link,
html[data-theme="dark"] .mobile-nav a.m-link,
html[data-theme="dark"] .mobile-nav .m-sub a,
html[data-theme="dark"] .dropdown a,
html[data-theme="dark"] .top-links,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .definition dd,
html[data-theme="dark"] .details dd {
    color: #e8e1ef;
}

html[data-theme="dark"] .dropdown a:hover,
html[data-theme="dark"] .mobile-nav a.m-link:hover,
html[data-theme="dark"] .amount-option[aria-pressed="true"] {
    background-color: #362844;
    color: #f4f0f8;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #17141d;
    color: #f4f0f8;
    border-color: #51495b;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #a79eaf;
}

html[data-theme="dark"] .btn-purple-outline {
    background-color: #211c28;
    color: #e5c9fa;
    border-color: #a779ca;
}

html[data-theme="dark"] .btn-purple-outline:hover {
    background-color: #362844;
}

html[data-theme="dark"] .button.secondary {
    background-color: #51495b;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .alert-success {
    background-color: #173b2b;
    color: #b7f0cc;
}

html[data-theme="dark"] .notice.warning,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .status-icon.pending {
    background-color: #473713;
    color: #ffe4a3;
}

html[data-theme="dark"] .notice.error,
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .alert-errors,
html[data-theme="dark"] .status-icon.cancelled,
html[data-theme="dark"] .status-icon.failed {
    background-color: #4a211f;
    color: #ffc4bd;
}

html[data-theme="dark"] .status,
html[data-theme="dark"] .status-icon {
    background-color: #173b2b;
    color: #b7f0cc;
}

html[data-theme="dark"] .error,
html[data-theme="dark"] [aria-invalid="true"] + .error {
    color: #ffaaa3;
}

html[data-theme="dark"] .badge {
    background-color: #362844;
    color: #e5c9fa;
}

html[data-theme="dark"] .badge.failed,
html[data-theme="dark"] .badge.refunded,
html[data-theme="dark"] .badge.cancelled,
html[data-theme="dark"] .badge.expired {
    background-color: #4a211f;
    color: #ffc4bd;
}

html[data-theme="dark"] .badge.paid,
html[data-theme="dark"] .badge.processed {
    background-color: #173b2b;
    color: #b7f0cc;
}

html[data-theme="dark"] .inline-link,
html[data-theme="dark"] .bottom-link a,
html[data-theme="dark"] .back,
html[data-theme="dark"] .top-links a:hover,
html[data-theme="dark"] .top-links a.inline-link {
    color: #d7b6f1;
}

html[data-theme="dark"] .table-wrap table,
html[data-theme="dark"] .table-wrap th,
html[data-theme="dark"] .table-wrap td,
html[data-theme="dark"] .details,
html[data-theme="dark"] .details div {
    border-color: #393242;
}

html[data-theme="dark"] .newsletter-copy h2,
html[data-theme="dark"] .newsletter-copy p {
    color: #2e0f4c;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .impact,
html[data-theme="dark"] footer,
html[data-theme="dark"] .btn-purple,
html[data-theme="dark"] .btn-gold,
html[data-theme="dark"] .btn-ghost-dark,
html[data-theme="dark"] .top,
html[data-theme="dark"] .button,
html[data-theme="dark"] .submit {
    color: #fff;
}

.theme-toggle {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 44px;
    padding: .65rem .95rem;
    border: 1px solid #d9d6e3;
    border-radius: 999px;
    background: #fff;
    color: #2e0f4c;
    box-shadow: 0 8px 24px rgba(24, 19, 34, .18);
    font: 600 .88rem/1 Inter, system-ui, sans-serif;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
}

.theme-toggle:focus-visible {
    outline: 3px solid #6b21a8;
    outline-offset: 3px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    flex: none;
}

html[data-theme="dark"] .theme-toggle {
    border-color: #51495b;
    background: #2b2533;
    color: #f4f0f8;
}

@media (max-width: 480px) {
    .theme-toggle {
        right: max(.75rem, env(safe-area-inset-right));
        bottom: max(.75rem, env(safe-area-inset-bottom));
        min-height: 42px;
        padding: .6rem .8rem;
        font-size: .82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}