/* Shared app/marketing palette: docs/theme-style-guide.md.
   Light mode uses brand purple for accent ink and focus; lime stays a fill. */
:root {
    color-scheme: dark;
    --whs-page: #000;
    --whs-surface: #17191e;
    --whs-surface-raised: #22252d;
    --whs-surface-muted: #252932;
    --whs-text: #cedada;
    --whs-muted: #aebaba;
    --whs-border: #66717e;
    --whs-accent: #ceff1a;
    --whs-accent-text: #ceff1a;
    --whs-on-accent: #171b0c;
    --whs-accent-soft: rgba(206, 255, 26, .1);
    --whs-focus: #ceff1a;
}

html[data-theme="light"] {
    color-scheme: light;
    --whs-page: #f4f6f2;
    --whs-surface: #fff;
    --whs-surface-raised: #fff;
    --whs-surface-muted: #edf1eb;
    --whs-text: #20272d;
    --whs-muted: #55616b;
    --whs-border: #bcc6be;
    --whs-accent-text: #32213a;
    --whs-on-accent: #32213a;
    --whs-accent-soft: #f0f7d8;
    --whs-focus: var(--whs-accent-text);
    --whs-diagram-grid: rgba(32, 39, 45, .13);
    --whs-diagram-floor: rgba(224, 232, 219, .6);
    --whs-diagram-label-halo: #fff;
    --color-light: #20272d;
    --color-medium: #55616b;
    --shadow-tech: 0 2px 8px rgba(32, 39, 45, .06);
    --border-tech: 1px solid var(--whs-border);
    --border-subtle: 1px solid var(--whs-border);
    --focus-ring: 0 0 0 .2rem rgba(50, 33, 58, .18);
}

/* Visible outside the collapsed menu on phones, after navigation on desktop. */
.whs-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex-shrink: 0;
    min-height: 36px;
    padding: .4rem .65rem;
    border: 1px solid var(--whs-border);
    border-radius: 6px;
    background: var(--whs-surface);
    color: var(--whs-text);
    font: 600 .82rem/1.2 'Source Sans 3', sans-serif;
    white-space: nowrap;
    cursor: pointer;
}
.whs-theme-toggle:hover { border-color: var(--whs-focus); background: var(--whs-accent-soft); }
.whs-theme-toggle:focus-visible { outline: 2px solid var(--whs-focus); outline-offset: 3px; }
.whs-theme-toggle svg { flex: 0 0 auto; }
.whs-theme-moon, html[data-theme="light"] .whs-theme-sun { display: none; }
html[data-theme="light"] .whs-theme-moon { display: block; }
.top-nav-inner > .whs-theme-toggle { order: 3; margin-left: .8rem; }
@media (max-width: 1199px) {
    .top-nav .whs-theme-toggle [data-theme-label] { display: none; }
}
@media (max-width: 1199px) {
    .top-nav-inner > .whs-theme-toggle { order: 0; margin-left: auto; }
    .top-nav-inner > .top-nav-toggle { margin-left: .4rem; }
}
@media (max-width: 400px) {
    .top-nav-inner { padding-left: .75rem; padding-right: .75rem; }
    .top-nav-brand { font-size: .65rem; }
}

html[data-theme="light"] body,
html[data-theme="light"] .main-content { background: var(--whs-page); color: var(--whs-text); }
html[data-theme="light"] .main-content::before { opacity: .025; }
html[data-theme="light"] :is(.top-nav, .top-nav-collapse.show) {
    background: var(--whs-surface);
    border-color: var(--whs-border);
}
html[data-theme="light"] :is(.top-nav-brand, .top-nav-brand:hover) { color: var(--whs-text); }
/* Navigation uses black ink in every state; lime is reserved for page actions. */
html[data-theme="light"] .top-nav {
    --whs-focus: #000;
    --whs-accent-soft: var(--whs-surface-muted);
}
html[data-theme="light"] .top-nav :is(.top-nav-link, .top-nav-toggle, .whs-theme-toggle),
html[data-theme="light"] .top-nav :is(.top-nav-link, .top-nav-toggle, .whs-theme-toggle):is(:hover, :focus, :active) {
    color: #000 !important;
}
html[data-theme="light"] .top-nav :is(.top-nav-link, .top-nav-toggle, .whs-theme-toggle):focus-visible {
    outline-color: #000;
    box-shadow: none;
}
html[data-theme="light"] :is(.top-nav-divider, .top-nav-avatar, .top-nav-right) { border-color: var(--whs-border); }
html[data-theme="light"] .top-nav-divider { background: var(--whs-border); }
html[data-theme="light"] :is(.top-nav-upgrade, .top-nav-early-access) {
    border: 1px solid transparent;
    background: transparent;
    color: #000 !important;
    animation: none;
    box-shadow: none;
}
html[data-theme="light"] :is(.top-nav-upgrade, .top-nav-early-access):is(:hover, :focus, :active) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
html[data-theme="light"] :is(h1, h2, h3, h4, h5, h6, .display-4, .display-6, .card-header, .form-label) { color: var(--whs-text); }
html[data-theme="light"] a { color: var(--whs-accent-text); }
html[data-theme="light"] a:hover { color: var(--whs-accent-text); }
html[data-theme="light"] :is(.text-muted, .lead, .form-text) { color: var(--whs-muted) !important; }
html[data-theme="light"] :is(.text-white, .text-light, .text-tech) { color: var(--whs-text) !important; }
html[data-theme="light"] .text-primary { color: var(--whs-accent-text) !important; }
html[data-theme="light"] :is(.card, .results-card, .feature-card, .upload-card, .login-card) {
    background: var(--whs-surface);
    color: var(--whs-text);
    border-color: var(--whs-border);
    backdrop-filter: none;
}
html[data-theme="light"] :is(.card:hover, .results-card:hover, .feature-card:hover) { border-color: var(--whs-muted); }
html[data-theme="light"] :is(.card-header, .card-footer, .results-card .card-header) {
    background: var(--whs-surface-muted);
    color: var(--whs-text);
    border-color: var(--whs-border);
}
html[data-theme="light"] :is(.form-control, .form-select, .input-group-text, .custom-file-label, .form-check-input) {
    background-color: var(--whs-surface);
    border-color: #7b897e;
    color: var(--whs-text);
}
html[data-theme="light"] :is(.form-control, .form-select):focus {
    background-color: var(--whs-surface);
    color: var(--whs-text);
    border-color: var(--whs-focus);
    box-shadow: var(--focus-ring);
}
html[data-theme="light"] .form-control::placeholder { color: var(--whs-muted); opacity: 1; }
html[data-theme="light"] :is(.form-control, .form-select):disabled { background-color: var(--whs-surface-muted); opacity: .75; }
html[data-theme="light"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2320272d' stroke-width='2'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
html[data-theme="light"] input { accent-color: var(--whs-accent-text); }
html[data-theme="light"] .form-check-input:checked { background-color: var(--whs-accent-text); border-color: var(--whs-accent-text); }
html[data-theme="light"] :is(.btn-primary, .bg-primary, .badge-plus, .badge-plus-sm, .alert-warning-custom) {
    background-color: var(--whs-accent) !important;
    color: var(--whs-on-accent) !important;
    border: 1px solid var(--whs-on-accent) !important;
}
html[data-theme="light"] :is(.btn-primary:hover, .btn-primary:active, .btn-primary:focus) { background-color: #bce914 !important; }
html[data-theme="light"] :is(.btn-secondary, .btn-outline-secondary, .btn-outline-light, .btn-light, .sample-buttons .btn) {
    background: var(--whs-surface);
    color: var(--whs-text) !important;
    border: 1px solid #7b897e !important;
}
html[data-theme="light"] :is(.btn-secondary, .btn-outline-secondary, .btn-outline-light, .btn-light):is(:hover, :focus, :active) {
    background: var(--whs-surface-muted) !important;
    color: var(--whs-text) !important;
}
html[data-theme="light"] .btn-outline-primary {
    color: var(--whs-accent-text) !important;
    border-color: var(--whs-accent-text) !important;
}
html[data-theme="light"] .btn-outline-primary:is(:hover, :focus, :active) {
    background: var(--whs-accent) !important;
    border-color: var(--whs-on-accent) !important;
    color: var(--whs-on-accent) !important;
}
html[data-theme="light"] .btn-link { color: var(--whs-accent-text); }
html[data-theme="light"] :is(.nav-link, .page-link) { color: var(--whs-accent-text); }
html[data-theme="light"] :is(.nav-link.active, .page-item.active .page-link) { color: var(--whs-text); background: var(--whs-accent-soft); border-color: var(--whs-border); }
html[data-theme="light"] .btn-outline-warning { color: #70520b; border-color: #967011; }
html[data-theme="light"] .btn-outline-warning:hover { color: var(--whs-on-accent); background: #ffdf8a; }
html[data-theme="light"] :is(.btn-danger, .btn-success, .btn-dark, .badge.bg-danger, .badge.bg-success, .badge.bg-secondary, .badge.bg-dark) { color: #fff !important; }
html[data-theme="light"] .btn-outline-danger { color: #a12636; border-color: #a12636; }
html[data-theme="light"] .btn-outline-danger:hover { color: #fff; background: #a12636; }
html[data-theme="light"] :is(.badge-lite, .badge-lite-sm) { color: var(--whs-text) !important; background: var(--whs-surface-muted) !important; border-color: var(--whs-muted) !important; }
html[data-theme="light"] :is(.btn, .form-control, .form-select):focus { box-shadow: var(--focus-ring) !important; }
html[data-theme="light"] :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--whs-focus); outline-offset: 3px; }

html[data-theme="light"] :is(.table, .table-dark) {
    --bs-table-bg: var(--whs-surface);
    --bs-table-striped-bg: var(--whs-surface-muted);
    --bs-table-striped-color: var(--whs-text);
    --bs-table-active-bg: var(--whs-accent-soft);
    --bs-table-active-color: var(--whs-text);
    --bs-table-hover-bg: var(--whs-accent-soft);
    --bs-table-hover-color: var(--whs-text);
    background: var(--whs-surface);
    color: var(--whs-text);
    border-color: var(--whs-border);
}
html[data-theme="light"] :is(.table, .dashboard-table) :is(th, td) { color: var(--whs-text) !important; border-color: var(--whs-border) !important; }
html[data-theme="light"] .table thead th { background: var(--whs-surface-muted); }
html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--whs-surface-muted); }
html[data-theme="light"] :is(.modal-content, .dropdown-menu, .list-group-item, .accordion-item, .accordion-body) {
    background: var(--whs-surface);
    color: var(--whs-text);
    border-color: var(--whs-border);
}
html[data-theme="light"] :is(.modal-header, .modal-footer) { border-color: var(--whs-border); }
html[data-theme="light"] .dropdown-item { color: var(--whs-text); }
html[data-theme="light"] :is(.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .list-group-item.active) { background: var(--whs-accent-soft); color: var(--whs-accent-text); }
html[data-theme="light"] :is(.btn-close, .btn-close-white) { filter: none; }
html[data-theme="light"] .accordion-button { background: var(--whs-surface-muted); color: var(--whs-text); border-color: var(--whs-border) !important; }
html[data-theme="light"] .accordion-button:not(.collapsed) { background: var(--whs-accent-soft); color: var(--whs-accent-text); }
html[data-theme="light"] :is(.alert-info, .alert-success) { background: var(--whs-accent-soft) !important; color: var(--whs-accent-text); border: 1px solid var(--whs-border); border-left: 4px solid var(--whs-accent-text); }
html[data-theme="light"] .alert-warning { background: #fff6da; color: #70520b; border-left-color: #967011; }
html[data-theme="light"] .alert-danger { background: #fff0f1; color: #9b2436; border-left-color: #9b2436; }
html[data-theme="light"] :is(.alert-info h6, .alert-info ul) { color: inherit; }
html[data-theme="light"] .text-success { color: #216538 !important; }
html[data-theme="light"] .text-danger { color: #a12636 !important; }
html[data-theme="light"] .text-warning { color: #765300 !important; }
html[data-theme="light"] .text-info { color: #235d80 !important; }
html[data-theme="light"] .progress { background: #dce4d8; border: 1px solid #7b897e; }
html[data-theme="light"] .progress-bar { color: var(--whs-on-accent); box-shadow: inset 0 0 0 1px var(--whs-on-accent); }
html[data-theme="light"] :is(.border-primary, .file-upload-area:hover, .upload-area) { border-color: var(--whs-accent-text) !important; }
html[data-theme="light"] :is(.file-upload-area, .file-upload-section, .sample-data-section, .bg-tech, .bg-dark, .guidelines-content, .guidelines-toggle, .layout-container) { background: var(--whs-surface-muted) !important; color: var(--whs-text); }
html[data-theme="light"] .hero-section { background: transparent !important; }
html[data-theme="light"] .badge.bg-dark { background: #32213a !important; color: #fff !important; }
html[data-theme="light"] .table td.bg-secondary { background: var(--whs-surface-muted) !important; }
html[data-theme="light"] .guidelines-toggle:hover { background: var(--whs-accent-soft) !important; }
html[data-theme="light"] .dashboard-card { border-color: var(--whs-border) !important; }
html[data-theme="light"] .dashboard-current-tier-card { background: var(--whs-accent); border: 1px solid var(--whs-on-accent) !important; }
html[data-theme="light"] .step-number { background: var(--whs-surface-muted); color: var(--whs-muted); }
html[data-theme="light"] .step.active .step-number { color: var(--whs-accent-text); border-color: var(--whs-accent-text); box-shadow: none; }
html[data-theme="light"] .step.completed .step-number { background: var(--whs-accent); color: var(--whs-on-accent); border-color: var(--whs-on-accent); }
html[data-theme="light"] :is(.step.active .step-label, .step.completed .step-label) { color: var(--whs-accent-text); }

/* Diagram data retains its palette; surrounding chrome follows the theme. */
html[data-theme="light"] .network-shell {
    --network-surface: var(--whs-surface);
    --network-surface-raised: var(--whs-surface-muted);
    --network-border: var(--whs-border);
    --network-text-muted: var(--whs-muted);
}
html[data-theme="light"] :is(.network-progress, .network-card, .network-admin-badge, .network-secondary-action.btn-outline-secondary) { background: var(--whs-surface); }
html[data-theme="light"] .network-card.is-selected { background: var(--whs-accent-soft); border-color: var(--whs-accent-text); box-shadow: inset 3px 0 0 var(--whs-accent-text); }
html[data-theme="light"] .network-badge { border-color: var(--whs-accent-text); }
html[data-theme="light"] :is(.network-progress-index, .network-card.is-selected::after) { border: 1px solid var(--whs-on-accent); }
html[data-theme="light"] .network-error { background: #fff0f1; color: #9b2436; }
html[data-theme="light"] .network-legend { color: #e8eded; }
html[data-theme="light"] .sample-switcher { background: var(--whs-surface); border-color: var(--whs-border); box-shadow: var(--shadow-tech); }
html[data-theme="light"] .sample-btn { color: var(--whs-text); border-color: var(--whs-border); }
html[data-theme="light"] .sample-btn.active { color: var(--whs-on-accent); background: var(--whs-accent); border-color: var(--whs-on-accent); }
html[data-theme="light"] .sample-btn:hover { color: var(--whs-accent-text); border-color: var(--whs-accent-text); }

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