/* Shared light, dark, and system-aware theme layer. Loaded after page styles. */
:root {
    --theme-bg: #f6f8fc;
    --theme-surface: #ffffff;
    --theme-surface-raised: #ffffff;
    --theme-surface-muted: #f1f5f9;
    --theme-text: #0f172a;
    --theme-text-muted: #56657a;
    --theme-heading: #1a237e;
    --theme-border: #dce3ec;
    --theme-input: #ffffff;
    --theme-header: rgba(255, 255, 255, 0.94);
    --theme-hover: #edf2f7;
    --theme-overlay: rgba(15, 23, 42, 0.66);
    --theme-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    --theme-focus: #f59e0b;
    color-scheme: light;
}

html[data-theme="dark"] {
    --theme-bg: #0b1220;
    --theme-surface: #111b2d;
    --theme-surface-raised: #18243a;
    --theme-surface-muted: #1d2a40;
    --theme-text: #e7edf6;
    --theme-text-muted: #aebbd0;
    --theme-heading: #c7d2fe;
    --theme-border: #34445d;
    --theme-input: #101a2b;
    --theme-header: rgba(11, 18, 32, 0.95);
    --theme-hover: #22314a;
    --theme-overlay: rgba(2, 6, 23, 0.82);
    --theme-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
    --theme-focus: #fbbf24;

    --light-color: var(--theme-bg);
    --text-color: var(--theme-text);
    --gray-color: var(--theme-text-muted);
    --light-gray: var(--theme-surface-muted);
    --box-shadow: var(--theme-shadow);

    --vd-bg: var(--theme-bg);
    --vd-surface: var(--theme-surface);
    --vd-ink: var(--theme-text);
    --vd-muted: var(--theme-text-muted);
    --vd-border: var(--theme-border);
    --vd-navy: #aebcff;
    --vd-navy-deep: #8495f5;
    --vd-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.28);
    --vd-shadow-md: 0 8px 22px rgba(0, 0, 0, 0.32);
    --vd-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.42);
    color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--theme-bg);
}

html[data-theme="dark"] body {
    color: var(--theme-text);
    transition: background-color 180ms ease, color 180ms ease;
}

/* Fixed three-way preference control shared by every surface. */
.theme-toggle {
    position: fixed !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 999px !important;
    background: var(--theme-surface-raised) !important;
    background: color-mix(in srgb, var(--theme-surface-raised) 92%, transparent) !important;
    box-shadow: var(--theme-shadow) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--theme-text) !important;
}

.theme-toggle__option {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-text-muted) !important;
    font: 600 12px/1 Roboto, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

.theme-toggle__option:hover {
    background: var(--theme-hover) !important;
    color: var(--theme-text) !important;
    transform: none !important;
}

.theme-toggle__option.is-active {
    background: var(--theme-heading) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .theme-toggle__option.is-active {
    background: #5969dc !important;
}

.theme-toggle__option:focus-visible {
    outline: 3px solid var(--theme-focus) !important;
    outline-offset: 2px !important;
}

.theme-toggle__option svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
}

body.embedded-mode .theme-toggle {
    display: none !important;
}

@media (max-width: 480px) {
    .theme-toggle {
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    .theme-toggle__option {
        min-height: 34px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
    }
}

/* Browser controls should remain readable in dark mode. Checkboxes and radios
   are excluded: color-scheme already gives them a native dark treatment, and
   painting a background over it flattens them into grey squares. */
html[data-theme="dark"] :where(
    input:not([type="checkbox"]):not([type="radio"]), select, textarea
) {
    background-color: var(--theme-input);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
    color: #8290a7;
    opacity: 1;
}

html[data-theme="dark"] :where(input, select, textarea):focus {
    border-color: #8495f5;
    box-shadow: 0 0 0 3px rgba(132, 149, 245, 0.22);
}

html[data-theme="dark"] a:not(.cta-button):not(.secondary-button):not(.cd-btn):not(.payment-button) {
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

html[data-theme="dark"] hr {
    border-color: var(--theme-border);
}

html[data-theme="dark"] ::selection {
    background: #4f5fd6;
    color: #ffffff;
}

/* Public website surfaces. */
html[data-theme="dark"] header:not(.page-header),
html[data-theme="dark"] .payment-header {
    background: var(--theme-header) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] :where(nav ul li a, .mobile-nav a, .navbar a):not(.cta-button):not(.login-button) {
    color: var(--theme-text-muted);
}

html[data-theme="dark"] :where(nav ul li a, .mobile-nav a, .navbar a):not(.cta-button):hover,
html[data-theme="dark"] :where(nav ul li a.active, .mobile-nav a.active) {
    color: #c7d2fe;
}

html[data-theme="dark"] .logo h1 {
    color: #aebcff !important;
}

html[data-theme="dark"] .logo h1 span {
    color: var(--secondary-color, #ff6f00) !important;
}

html[data-theme="dark"] header nav ul li a.login-button {
    color: #c7d2fe !important;
    border-color: #8495f5 !important;
}

html[data-theme="dark"] header nav ul li a.login-button:hover {
    background: #4f5fd6 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :where(
    .features, .courses, .team, .testimonials, .contact, .careers,
    .faq-section, .policy-section, .content-section, .cta-section,
    .cd-body, .payment-section, .enrollment-section, .blog-section,
    .blog-post-section, .job-detail-section, .faq-main, .gallery-section
) {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text);
}

html[data-theme="dark"] :where(
    .feature-card, .course-card, .team-member, .testimonial-card,
    .enrollment-form, .contact-form, .contact-info, .faq-item,
    .blog-card, .post-card, .job-card, .policy-content,
    .cd-section, .cd-card, .payment-container, .payment-info,
    .amount-display, .payment-method-container, .coupon-section,
    .price-breakdown, .newsletter-content, .openings-search,
    .faq-item-new, .card, .card-header, .metric-card,
    #reviews-carousel > div
) {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text);
    box-shadow: var(--vd-shadow-sm);
}

html[data-theme="dark"] :where(
    .section-title h2, .feature-card h3, .course-content h3,
    .team-member h3, .contact-info h3, .contact-form h3,
    .cta-section h2, .careers h3, .cd-section h2,
    .payment-container h1, .payment-container h2
) {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] :where(
    .section-title p, .feature-card p, .course-description,
    .course-duration, .team-member p, .testimonial-text,
    .author-info p, .cta-section p, .cd-section p,
    .payment-result p, .bnpl-tagline, #reviews-carousel > div p
) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .cd-list li,
html[data-theme="dark"] .cd-faq details {
    background: var(--theme-surface-muted) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .cd-card-contact a {
    color: #aebcff;
}

html[data-theme="dark"] .faq-item-question {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .faq-item-icon {
    background: #eef2ff !important;
    color: #3446b8 !important;
}

html[data-theme="dark"] .faq-item-chevron {
    background: var(--theme-surface-muted) !important;
    border-color: #71819a !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .contact-faq-callout {
    background: var(--theme-surface-raised) !important;
    border-color: #596b88 !important;
}

html[data-theme="dark"] :where(.contact-faq-icon, .contact-faq-title, .contact-faq-link) {
    color: #c7d2fe !important;
}

html[data-theme="dark"] .contact-faq-copy {
    color: var(--theme-text) !important;
}

/* The Google Maps embed has no native dark style, so approximate one by
   inverting the iframe. Hue-rotate keeps water/roads in believable colors. */
html[data-theme="dark"] .map iframe {
    filter: invert(0.9) hue-rotate(180deg) contrast(0.92) saturate(0.85);
    border-radius: inherit;
}

html[data-theme="dark"] :where(.opening-title, .opening-row-link) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .opening-row-link:hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .payment-section {
    background: linear-gradient(135deg, #0b1220 0%, #17243a 100%) !important;
}

html[data-theme="dark"] :where(#card-element, #ach-element) {
    background: var(--theme-surface-muted) !important;
    border-color: #596b88 !important;
}

html[data-theme="dark"] :where(.payment-info, .amount-display, .venmo-instructions) {
    background: var(--theme-surface-muted) !important;
}

/* The default Afterpay button is nearly black, so it disappears into the
   payment card in dark mode. Use Afterpay's mint as the surface here and keep
   the label dark for a recognizable, high-contrast payment option. */
html[data-theme="dark"] .afterpay-pay-btn {
    background: #b2fce4 !important;
    color: #111820 !important;
}

html[data-theme="dark"] .afterpay-pay-btn:hover {
    background: #92f5d4 !important;
}

html[data-theme="dark"] .afterpay-logo-text {
    color: #111820 !important;
}

html[data-theme="dark"] .payment-brand-name {
    color: #aebcff !important;
}

html[data-theme="dark"] .payment-brand-mark {
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
}

html[data-theme="dark"] :where(.payment-method, .coupon-section, .price-breakdown) {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .payment-method:hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .payment-method.selected,
html[data-theme="dark"] .payment-method.active {
    background: #332b2a !important;
    border-color: #ff8a3d !important;
}

html[data-theme="dark"] .payment-method .payment-name {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .payment-method .payment-logo {
    background: #dfe6f0 !important;
    border-radius: 6px;
    padding: 5px;
}

html[data-theme="dark"] :where(.coupon-section h3, .amount-display .amount, .total-row) {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] :where(.price-value, .fee-text) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] :where(.coupon-message.success, .discount-row) {
    background: #143b33 !important;
    border-color: #3a8f76 !important;
    color: #a7f3d0 !important;
}

html[data-theme="dark"] .discount-text {
    color: #a7f3d0 !important;
}

html[data-theme="dark"] :where(.price-row, .total-row) {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] #paypal-button-container {
    background: var(--theme-surface-muted) !important;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 14px;
}

/* Enrollment and form widgets. General-purpose enrollment signature canvases
   remain white; the document-signing portal overrides its canvas below. */
html[data-theme="dark"] :where(
    .form-section, .training-box, .radio-option, .flyout-trigger,
    .flyout-dropdown, .flyout-category, .flyout-submenu, .flyout-sub-item,
    .signature-modal-content, .signature-modal-header, .signature-modal-footer
) {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] :where(.flyout-category, .flyout-sub-item, .radio-option):hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] :where(.form-section h3, .training-box h3, .signature-modal-header h3) {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] :where(.form-section > p, .training-box p, .step-label) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] :where(.signature-container canvas, .signature-modal canvas, .canvas-wrap, .canvas-wrap canvas) {
    background: #ffffff !important;
}

/* Student booking portal. */
html[data-theme="dark"] :where(
    .booking-container, .login-box, .booking-progress, .slot-card,
    #page-toc, #user-dropdown, .drive-sheet-modal-dialog,
    .drive-sheet-modal-header, .drive-sheet-modal-loading
) {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

/* Online course entry card on the authenticated student portal. */
html[data-theme="dark"] #online-course-section {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] #online-course-section h3 {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] #online-course-section p {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] #online-course-section .btn-primary {
    background: #6374ee !important;
    border-color: #8495f5 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .login-overlay {
    background: rgba(11, 18, 32, 0.96) !important;
}

html[data-theme="dark"] .login-instructions--reauth {
    background: var(--theme-surface-muted) !important;
    border-color: #49617f !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] :where(.booking-header h1, .login-box h2, .progress-value) {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] .system-status-help {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .system-status-help a {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] :where(.progress-label, #page-toc .toc-link) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] :where(
    .checklist-heading, .checklist-course-title,
    .booking-complete-title, #instructor-dashboard h2
) {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] :where(
    .checklist-heading-icon, .checklist-action-link,
    #page-toc .toc-link i, .instructor-slot-time
) {
    color: #aebcff !important;
}

html[data-theme="dark"] :where(.checklist-course-card, .booking-complete-card) {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] :where(.checklist-item-label, .booking-complete-copy) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] :where(
    .booking-complete-hint, .slot-filter-empty-copy,
    .checklist-course-card > div > span
) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] :where(.checklist-replace-button, .reset-slot-filters) {
    background: var(--theme-surface-muted) !important;
    border-color: #8495f5 !important;
    color: #c7d2fe !important;
}

html[data-theme="dark"] .slot-card:hover,
html[data-theme="dark"] #page-toc .toc-link:hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .slot-card.disabled {
    background: #1a2437 !important;
}

html[data-theme="dark"] .slot-card.selected {
    background: #3446b8 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :where(.drive-sheet-modal-close, .instructor-slot-action.all-sheets) {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .instructor-slot-action.delete-slot {
    background: rgba(127, 29, 29, 0.34) !important;
    border-color: #b95059 !important;
    color: #fecaca !important;
}

html[data-theme="dark"] .drive-sheet-modal {
    background: var(--theme-overlay) !important;
}

/* Authenticated admin portal. The portal's own surfaces are token-driven in
   admin-workspace.css; what remains here is the legacy markup that predates
   those tokens (the editor panels and the EasyMDE chrome). */
html[data-theme="dark"] :where(
    .admin-header, .stat-card, .data-section, .filter-bar,
    .revenue-chart-section,
    .editor-panel, .content-item, .upload-area,
    .EasyMDEContainer .CodeMirror, .editor-toolbar
) {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] body > .container {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

/* Admin headings that the token layer already owns are deliberately absent:
   in light mode every panel heading is the same ink, and tinting a subset of
   them here is what made dark mode read as a patchwork. */
html[data-theme="dark"] :where(
    .login-box h2, .editor-panel h2, .list-panel h2, .content-item-title
) {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] :where(
    .filter-bar label, .content-item-meta,
    .upload-area p, .loading, .no-cert
) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] :where(th, td, .admin-tabs, .tab-bar, .list-tabs, .section-header) {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] :where(th, .ops-table th) {
    background: var(--theme-surface-muted) !important;
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] :where(tbody tr:hover, tr:hover) {
    background: var(--theme-hover) !important;
}

/* .tab-btn is deliberately absent: in the admin portal those are the sidebar
   nav items, which sit transparent on the navy rail in both themes. */
html[data-theme="dark"] :where(
    .action-btn, .filter-reset-btn, .btn-secondary, .type-btn,
    .list-tab, .editor-toolbar button
) {
    background-color: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] :where(.action-btn, .filter-reset-btn, .btn-secondary, .type-btn):hover {
    background: var(--theme-hover) !important;
}

html[data-theme="dark"] .admin-table-button {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .admin-table-button--primary { background: #4f63d9; border-color: #8495f5; color: #fff; }
html[data-theme="dark"] .admin-table-button--secondary { background: #475569; border-color: #64748b; color: #fff; }
html[data-theme="dark"] .admin-table-button--info { background: #1d4ed8; border-color: #60a5fa; color: #fff; }
html[data-theme="dark"] .admin-table-button--success { background: #166534; border-color: #4ade80; color: #fff; }
html[data-theme="dark"] .admin-table-button--warning { background: #92400e; border-color: #f59e0b; color: #fff; }
html[data-theme="dark"] .admin-table-button--danger { background: #991b1b; border-color: #f87171; color: #fff; }
html[data-theme="dark"] .admin-table-button--soft-info { background: #172f54; border-color: #315f91; color: #bfdbfe; }
html[data-theme="dark"] .admin-table-button--soft-success { background: #163d34; border-color: #2f6e59; color: #bbf7d0; }
html[data-theme="dark"] .admin-table-button--soft-warning { background: #4b3518; border-color: #8a6628; color: #fde68a; }
html[data-theme="dark"] .admin-table-button--soft-danger { background: #4a232c; border-color: #84414e; color: #fecdd3; }

html[data-theme="dark"] .featured-promo-badge {
    background: #4b3518;
    border-color: #8a6628;
    color: #fde68a;
}

html[data-theme="dark"] .schedule-row--locked { background: #2c2415 !important; }
html[data-theme="dark"] .schedule-row--locked:hover { background: #3a2f1a !important; }
html[data-theme="dark"] :where(.schedule-day-label, .schedule-student-address) { color: var(--theme-text-muted); }
html[data-theme="dark"] .schedule-lock-badge { background: #4b3518; border-color: #8a6628; color: #fdba74; }
html[data-theme="dark"] .schedule-lock-note { background: #3d3515; border-color: #76662b; color: #fde68a; }
html[data-theme="dark"] .schedule-attended-badge { background: #172f54; color: #bfdbfe; }

html[data-theme="dark"] .admin-document-link {
    color: #c7d2fe !important;
}

html[data-theme="dark"] .user-role-badge {
    background: #2b3952 !important;
    border: 1px solid #596b88 !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] #posts-tab :where(label, .posts-list-title) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .list-tab.active,
html[data-theme="dark"] .type-btn.active {
    color: #c7d2fe !important;
    border-color: #8495f5 !important;
}

html[data-theme="dark"] #reviews-carousel > div h4 {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] #login-modal {
    background: rgba(2, 6, 23, 0.86) !important;
}

/* Instructor portal. */
html[data-theme="dark"] :where(
    #login-view, .topbar, .editor-bar, .sheet-card, .login-card,
    #sessions-panel, #student-panel, .session, .sheet-row
) {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] :where(.login-card p, .who, .sheet-meta, .save-state) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] body.embedded-mode {
    background: var(--theme-bg) !important;
}

html[data-theme="dark"] .sheet-row {
    background: var(--theme-surface-raised) !important;
}

html[data-theme="dark"] :where(.sheet-row .lbl, #student-title) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] #drive-sheet-modal-title {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .drive-sheet-modal-frame {
    background: var(--theme-bg) !important;
}

html[data-theme="dark"] :where(.sheet-row .muted, .session .meta .sub, .session .when .t) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] :where(.btn-ghost, .link, #session-filter) {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .stage {
    background: #070b13 !important;
}

html[data-theme="dark"] .progress {
    background: var(--theme-surface-muted) !important;
}

/* Contract signing portal. Document previews follow the selected theme;
   signature drawing areas stay white so exported ink remains predictable. */
html[data-theme="dark"] :where(
    .progress-card, .document-card, .payment-box, .sig-section,
    .authorization-box, .type-wrap input, .state-card
) {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] :where(
    .doc-header h2, .section-title, .sig-section h3,
    .type-wrap input, .initials-input, .state-card h2
) {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] :where(
    .progress-label, .doc-header .address, .payment-box .lbl,
    .sig-table .lbl, .doc-footer, .initials-group .hint,
    .state-card p, .state-card .contact
) {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] :where(.sig-table td, .doc-header, .section-title, .initials-group) {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] #state-main .form-group label,
html[data-theme="dark"] #state-main .initials-group label {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] #state-main .form-group :where(input, select, textarea) {
    background: var(--theme-input) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    opacity: 1;
}

html[data-theme="dark"] #state-main .form-group :where(input, textarea).prefilled {
    background: var(--theme-surface-muted) !important;
}

html[data-theme="dark"] #state-main :where(.document-notice--info) {
    background: #172f54 !important;
    border-color: #315f91 !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] #state-main :where(.document-notice--success) {
    background: #143b33 !important;
    border-color: #2f6e59 !important;
    color: #bbf7d0 !important;
}

html[data-theme="dark"] #state-main :where(.document-notice--warning, .refund-line) {
    background: #4b3518 !important;
    border-color: #8a6628 !important;
    color: #fde68a !important;
}

html[data-theme="dark"] :where(.sig-tab, .btn-clear) {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .sig-tab.active {
    background: #3446b8 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #state-main .sig-section .canvas-wrap,
html[data-theme="dark"] #state-main .sig-section .canvas-wrap canvas {
    background: var(--theme-input) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .full-state {
    background: var(--theme-bg) !important;
}

/* Inline legacy colors used by portal templates. Theme styles are loaded last. */
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background: #f8f"],
html[data-theme="dark"] [style*="background:#f8f"],
html[data-theme="dark"] [style*="background-color: #f8f"],
html[data-theme="dark"] [style*="background-color:#f8f"],
html[data-theme="dark"] [style*="background: #f0f"],
html[data-theme="dark"] [style*="background:#f0f"],
html[data-theme="dark"] [style*="background-color: #f0f"],
html[data-theme="dark"] [style*="background-color:#f0f"] {
    background-color: var(--theme-surface-raised) !important;
}

html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #444"],
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color: #555"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #475569"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#64748b"] {
    color: var(--theme-text) !important;
}

@media (prefers-reduced-motion: reduce) {
    body,
    .theme-toggle__option {
        transition: none !important;
    }
}

@media print {
    .theme-toggle {
        display: none !important;
    }
}