/* Final theme layer: keep every late-stage component tied to the shared light/dark tokens. */
:root {
    --ui-canvas: var(--site-bg-solid);
    --ui-card: var(--site-surface-elevated);
    --ui-ink: var(--site-text-strong);
    --ui-muted: var(--site-text-soft);
    --ui-border: var(--site-border);
    --ui-shadow-sm: 0 10px 30px rgba(17, 31, 52, 0.08);
    --ui-shadow-lg: var(--site-shadow-strong);
}

html[data-theme="dark"] {
    --ui-shadow-sm: 0 12px 34px rgba(0, 0, 0, 0.24);
}

body {
    color: var(--site-text-strong);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--site-link);
    outline-offset: 3px;
}

/* Navigation, menus, and the footer remain readable against either canvas. */
.site-header,
.site-footer,
.site-menu-panel,
.profile-dropdown,
.portal-dropdown {
    border-color: var(--site-border);
    background: var(--site-surface-elevated);
    color: var(--site-text-strong);
}

.site-nav a,
.site-menu summary,
.site-menu-panel a,
.profile-name,
.profile-logout,
.portal-dropdown-link,
.site-footer nav a {
    color: var(--site-text-strong);
}

.site-nav a:hover,
.site-menu-panel a:not(.nav-cta):hover,
.profile-logout:hover,
.portal-dropdown-link:hover {
    background: var(--site-surface-soft-2);
    color: var(--site-link-hover);
}

.site-menu summary,
.profile-logout {
    border-color: var(--site-border);
    background: var(--site-surface-soft);
}

.site-footer-brand p {
    color: var(--site-text-soft);
}

/* General content surfaces and late overhaul cards. */
.portal-section,
.portal-slab,
.portal-panel,
.panel-card,
.portal-feature-card,
.portal-stack-card,
.portal-legend-card,
.portal-shop-card,
.portal-category-card,
.portal-thread-card,
.portal-empty-card,
.portal-reply-card,
.portal-product-card,
.auth-card,
.pricing-card,
.prose-shell,
.support-card,
.panel,
.stage-panel,
.stage-card,
.measurement-card,
.report-card,
.history-item,
.task-row,
.metric-chart-card,
.mini-history-card,
.chart-host,
.mini-chart,
.checkin-fieldset {
    border-color: var(--site-border);
    background: var(--site-surface);
    color: var(--site-text-strong);
}

.portal-section h1,
.portal-section h2,
.portal-section h3,
.portal-slab h1,
.portal-slab h2,
.portal-slab h3,
.portal-panel h1,
.portal-panel h2,
.portal-panel h3,
.panel-card h1,
.panel-card h2,
.panel-card h3,
.portal-feature-card strong,
.portal-stack-card strong,
.portal-legend-card strong,
.portal-shop-card strong,
.portal-category-card strong,
.portal-thread-card strong,
.portal-product-card strong,
.auth-card h1,
.pricing-card h1,
.pricing-card .price,
.prose-shell h1,
.prose-shell h2,
.support-card h1,
.support-card h2 {
    color: var(--site-text-strong);
}

.portal-slab-copy > p,
.portal-feature-card p,
.portal-stack-card span,
.portal-stack-card p,
.portal-legend-card span,
.portal-legend-card p,
.portal-shop-card span,
.portal-shop-card p,
.portal-category-card p,
.portal-thread-card p,
.portal-product-card p,
.portal-empty-card p,
.portal-reply-card p,
.panel-card p,
.auth-subtle,
.auth-helper,
.auth-foot,
.auth-form label,
.divider,
.price-note,
.pricing-card ul,
.pricing-card li,
.pricing-card p,
.prose-shell p,
.support-card p,
.support-card li,
.site-footer-brand p {
    color: var(--site-text-soft);
}

.divider::before {
    background: var(--site-border);
}

.divider span {
    background: var(--site-surface);
    color: var(--site-text-subtle);
}

.section-kicker,
.portal-kicker,
.metric-label,
.portal-thread-meta,
.portal-category-access,
.portal-product-type,
.chart-caption,
.panel-copy {
    color: var(--site-text-subtle);
}

.section-link,
.portal-link-button,
.auth-foot a,
.auth-helper a,
.prose-shell a,
.support-card a,
.site-footer a {
    color: var(--site-link);
}

.section-link:hover,
.portal-link-button:hover,
.auth-foot a:hover,
.auth-helper a:hover,
.prose-shell a:hover,
.support-card a:hover,
.site-footer a:hover {
    color: var(--site-link-hover);
}

/* Inputs and native controls cannot inherit an unreadable browser default. */
input,
select,
textarea,
.app-input,
.portal-form input,
.portal-form select,
.portal-form textarea,
.auth-form input,
.auth-form select,
.auth-form textarea,
.field-stack select,
.field-stack textarea,
.checkin-field input {
    border-color: var(--site-border);
    background: var(--site-surface-elevated);
    color: var(--site-text-strong);
    caret-color: var(--site-text-strong);
}

input::placeholder,
textarea::placeholder {
    color: var(--site-text-subtle);
    opacity: 1;
}

select option {
    background: var(--site-surface-elevated);
    color: var(--site-text-strong);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--ui-coral-strong);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    color: var(--site-text-subtle);
    opacity: 0.72;
}

/* Status feedback uses theme-aware semantic colors. */
.flash-message,
.submit-ok,
.status-pill.complete,
.history-item.completed span {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success-text);
}

.flash-message.error,
.auth-error,
.status-pill.missed,
.history-item.missed span,
.reset-warning {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-text);
}

/* These slabs intentionally stay dark in both themes. */
.portal-hero,
.portal-slab-dark,
.hero-slab,
.analytics-cta-card,
.launch-hero {
    color: var(--on-dark-strong);
}

.launch-hero {
    border-color: rgba(76, 104, 148, 0.72);
    background:
        radial-gradient(circle at 10% 15%, rgba(242, 79, 103, 0.2), transparent 23rem),
        linear-gradient(145deg, #0a1729, #142845);
}

.portal-slab-dark h1,
.portal-slab-dark h2,
.portal-slab-dark h3,
.portal-slab-dark strong,
.hero-slab h1,
.hero-slab h2,
.hero-slab h3,
.analytics-cta-card h1,
.analytics-cta-card h2,
.launch-hero h1,
.launch-hero h2 {
    color: var(--on-dark-strong);
}

.portal-slab-dark p,
.portal-slab-dark span,
.hero-slab p,
.hero-slab span,
.hero-slab small,
.analytics-cta-card p,
.launch-hero p {
    color: var(--on-dark-medium);
}

.portal-slab-dark .portal-kicker,
.portal-slab-dark .section-kicker,
.hero-slab .section-kicker,
.analytics-cta-card .section-kicker,
.launch-hero .section-kicker {
    color: var(--on-dark-soft);
}

/* Dark mode must override hard-coded light surfaces from the final overhaul file. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-menu-panel,
html[data-theme="dark"] .profile-dropdown,
html[data-theme="dark"] .portal-dropdown,
html[data-theme="dark"] .portal-section,
html[data-theme="dark"] .portal-slab:not(.portal-slab-dark),
html[data-theme="dark"] .portal-panel,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .portal-feature-card,
html[data-theme="dark"] .portal-stack-card,
html[data-theme="dark"] .portal-legend-card,
html[data-theme="dark"] .portal-shop-card,
html[data-theme="dark"] .portal-category-card,
html[data-theme="dark"] .portal-thread-card,
html[data-theme="dark"] .portal-empty-card,
html[data-theme="dark"] .portal-reply-card,
html[data-theme="dark"] .portal-product-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .prose-shell,
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stage-panel,
html[data-theme="dark"] .stage-card,
html[data-theme="dark"] .measurement-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .task-row,
html[data-theme="dark"] .metric-chart-card,
html[data-theme="dark"] .mini-history-card,
html[data-theme="dark"] .chart-host,
html[data-theme="dark"] .mini-chart,
html[data-theme="dark"] .checkin-fieldset {
    border-color: var(--site-border);
    background: var(--site-surface);
    color: var(--site-text-strong);
}

html[data-theme="dark"] .divider span {
    background: #0d1a2b;
}

html[data-theme="dark"] .metric-pair-grid > div,
html[data-theme="dark"] .summary-grid > div,
html[data-theme="dark"] .mini-history-card,
html[data-theme="dark"] .section-chip,
html[data-theme="dark"] .profile-logout,
html[data-theme="dark"] .site-menu summary {
    border-color: var(--site-border);
    background: var(--site-surface-soft);
    color: var(--site-text-strong);
}

.mobile-theme-toggle {
    display: none;
}

@media (max-width: 760px) {
    .site-menu-panel .mobile-theme-toggle,
    .profile-dropdown .mobile-theme-toggle {
        width: 100%;
        min-height: 44px;
        display: flex;
        justify-content: space-between;
        margin: 0.25rem 0;
        border-color: var(--theme-toggle-border);
        background: var(--theme-toggle-bg);
        color: var(--theme-toggle-text);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}