/*
 * TypologyOnline three-palette colour foundation.
 *
 * This file is the linked colour source for the three approved palettes.
 * It contains colour tokens and compatibility mappings only: no typography,
 * spacing, sizing, layout, radius, shadow, or component geometry rules.
 * Reference: final colour scheme gemini3_7 2ndSept2026.html (default accents).
 * Approved 6 September refinement: deeper dark action fills and clearer soft
 * text, reviewed in docs/previews/shared-colours.html.
 * The standalone review page remains at docs/previews/site-palettes.html.
 */

html[data-palette] {
    --enneagram-centre-heart: var(--trait-neuroticism-text);
    --enneagram-centre-head: var(--trait-agreeableness-text);
    --enneagram-centre-gut: var(--trait-conscientiousness-text);
}

html[data-palette="light"] {
    color-scheme: light;

    --site-color-canvas: #f8fafc;
    --site-color-surface: #ffffff;
    --site-color-surface-elevated: #f1f5f9;
    --site-color-input: #f1f5f9;
    --site-color-input-hover: #e2e8f0;
    --site-color-border: #e2e8f0;
    --site-color-border-strong: #cbd5e1;
    --site-color-heading: #0f172a;
    --site-color-heading-hover: #0f172a;
    --site-color-text: #0f172a;
    --site-color-muted: #475569;
    --site-color-soft: #475569;
    --site-color-accent-primary: #2563eb;
    --site-color-accent-text: #1d4ed8;
    --site-color-accent-hover: #1d4ed8;
    --site-color-focus: #2563eb;
    --site-color-on-accent: #ffffff;
    --site-color-success: #047857;
    --site-color-success-soft: #ecfdf5;
    --site-color-warning: #b45309;
    --site-color-warning-soft: #fffbeb;
    --site-color-danger: #b42318;
    --site-color-danger-soft: #fef3f2;
    --site-color-badge: #eff6ff;
    --site-color-badge-text: #1e40af;
    --site-color-badge-border: #bfdbfe;
    --site-color-highlight: #dbeafe;
    --site-color-highlight-text: #1e3a8a;
    --trait-openness-text: #6d28d9;
    --trait-conscientiousness-text: #047857;
    --trait-extraversion-text: #b45309;
    --trait-agreeableness-text: #0e7490;
    --trait-neuroticism-text: #be123c;
    --site-color-accent-rgb: 37, 99, 235;
    --site-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

html[data-palette="navy"] {
    color-scheme: dark;

    --site-color-canvas: #141b26;
    --site-color-surface: #1c2636;
    --site-color-surface-elevated: #263347;
    --site-color-input: #263347;
    --site-color-input-hover: #32425b;
    --site-color-border: #2f3e56;
    --site-color-border-strong: #475569;
    --site-color-heading: #f1f5f9;
    --site-color-heading-hover: #ffffff;
    --site-color-text: #f1f5f9;
    --site-color-muted: #94a3b8;
    --site-color-soft: #94a3b8;
    --site-color-accent-primary: #2563eb;
    --site-color-accent-text: #94bbf5;
    --site-color-accent-hover: #1d4ed8;
    --site-color-focus: #60a5fa;
    --site-color-on-accent: #ffffff;
    --site-color-success: #6ee7b7;
    --site-color-success-soft: rgba(16, 185, 129, 0.15);
    --site-color-warning: #fcd34d;
    --site-color-warning-soft: rgba(245, 158, 11, 0.15);
    --site-color-danger: #fda4af;
    --site-color-danger-soft: rgba(244, 63, 94, 0.15);
    --site-color-badge: rgba(148, 187, 245, 0.12);
    --site-color-badge-text: #a7c7f7;
    --site-color-badge-border: rgba(148, 187, 245, 0.25);
    --site-color-highlight: rgba(148, 187, 245, 0.15);
    --site-color-highlight-text: #d5e4fb;
    --trait-openness-text: #c4b5fd;
    --trait-conscientiousness-text: #6ee7b7;
    --trait-extraversion-text: #fcd34d;
    --trait-agreeableness-text: #67e8f9;
    --trait-neuroticism-text: #fda4af;
    --site-color-accent-rgb: 59, 130, 246;
    --site-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

html[data-palette="carbon"] {
    color-scheme: dark;

    --site-color-canvas: #151517;
    --site-color-surface: #202024;
    --site-color-surface-elevated: #2c2c33;
    --site-color-input: #2c2c33;
    --site-color-input-hover: #3a3a42;
    --site-color-border: #373740;
    --site-color-border-strong: #52525b;
    --site-color-heading: #f4f4f5;
    --site-color-heading-hover: #ffffff;
    --site-color-text: #f4f4f5;
    --site-color-muted: #a1a1aa;
    --site-color-soft: #a1a1aa;
    --site-color-accent-primary: #2563eb;
    --site-color-accent-text: #9dbef8;
    --site-color-accent-hover: #1d4ed8;
    --site-color-focus: #60a5fa;
    --site-color-on-accent: #ffffff;
    --site-color-success: #6ee7b7;
    --site-color-success-soft: rgba(16, 185, 129, 0.15);
    --site-color-warning: #fcd34d;
    --site-color-warning-soft: rgba(245, 158, 11, 0.15);
    --site-color-danger: #fda4af;
    --site-color-danger-soft: rgba(244, 63, 94, 0.15);
    --site-color-badge: rgba(157, 190, 248, 0.10);
    --site-color-badge-text: #b4cef9;
    --site-color-badge-border: rgba(157, 190, 248, 0.22);
    --site-color-highlight: rgba(157, 190, 248, 0.14);
    --site-color-highlight-text: #dce7fa;
    --trait-openness-text: #c4b5fd;
    --trait-conscientiousness-text: #6ee7b7;
    --trait-extraversion-text: #fcd34d;
    --trait-agreeableness-text: #67e8f9;
    --trait-neuroticism-text: #fda4af;
    --site-color-accent-rgb: 59, 130, 246;
    --site-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Separate graphic fills from text. Do not introduce new trait colouring into
 * the existing neutral-score/blue-bar Big Five report just to consume tokens. */
html[data-palette] {
    --trait-openness-bar: #8b5cf6;
    --trait-conscientiousness-bar: #10b981;
    --trait-extraversion-bar: #f59e0b;
    --trait-agreeableness-bar: #06b6d4;
    --trait-neuroticism-bar: #f43f5e;

    /* Existing fill consumers keep this alias; text must use accent-text. */
    --site-color-accent: var(--site-color-accent-primary);
    --site-color-accent-soft: var(--site-color-badge);
}

/* Bridge the approved source-of-truth values into the existing canonical API. */
html[data-palette] {
    --pv-color-canvas: var(--site-color-canvas);
    --pv-color-surface: var(--site-color-surface);
    --pv-color-surface-soft: var(--site-color-surface-elevated);
    --pv-color-primary: var(--site-color-heading);
    --pv-color-primary-hover: var(--site-color-heading-hover);
    --pv-color-text: var(--site-color-text);
    --pv-color-muted: var(--site-color-muted);
    --pv-color-soft: var(--site-color-soft);
    --pv-color-border: var(--site-color-border);
    --pv-color-border-strong: var(--site-color-border-strong);
    --pv-color-accent: var(--site-color-accent-text);
    --pv-color-accent-soft: var(--site-color-accent-soft);
    --pv-color-action: var(--site-color-accent-primary);
    --pv-color-action-hover: var(--site-color-accent-hover);
    --pv-color-on-action: var(--site-color-on-accent);
    --pv-color-danger: var(--site-color-danger);
    --pv-color-danger-soft: var(--site-color-danger-soft);
    --accent-rgb: var(--site-color-accent-rgb);
}

/*
 * Preserve the established dark-mode compatibility layer. Navy and Carbon
 * both keep data-theme="dark"; their hue difference comes from data-palette.
 */
html[data-theme="dark"][data-palette] {
    --dark-canvas: var(--site-color-canvas);
    --dark-surface: var(--site-color-surface);
    --dark-surface-raised: var(--site-color-surface-elevated);
    --dark-surface-input: var(--site-color-input);
    --dark-heading: var(--site-color-heading);
    --dark-text: var(--site-color-text);
    --dark-muted: var(--site-color-muted);
    --dark-soft: var(--site-color-soft);
    --dark-border: var(--site-color-border);
    --dark-border-strong: var(--site-color-border-strong);
    --dark-accent: var(--site-color-accent-text);
    --dark-accent-soft: var(--site-color-accent-soft);
    --dark-action: var(--site-color-accent-primary);
    --dark-action-hover: var(--site-color-accent-hover);
    --dark-danger: var(--site-color-danger);
    --dark-danger-soft: var(--site-color-danger-soft);
}

/* Fill the two component-local gaps not yet covered by the canonical aliases. */
html[data-palette] .reference-home {
    --home-content-bg: var(--site-color-surface-elevated);
}

/* Keep the light homepage on one continuous canvas; cards retain their surfaces. */
html[data-palette="light"] body.route-home .reference-home {
    --home-content-bg: var(--site-color-canvas);
}

html[data-palette] .auth-reference-page {
    --auth-subtle: var(--site-color-input);
    --auth-error: var(--site-color-danger);
}

/* Shared header colour mapping; all header geometry remains in reference-header.css. */
/* Big Five Carbon follows the established Carbon roles, not the Navy report palette. */
html[data-theme="dark"][data-palette="carbon"] body.route-tests-show:has(.big-five-result-page),
html[data-theme="dark"][data-palette="carbon"] body.route-tests-show .personality-test-screen[data-screen="results"]:has(.big-five-result-page),
html[data-theme="dark"][data-palette="carbon"] .account-saved-result-page:has(.big-five-result-page) {
    --surface: var(--site-color-surface);
    --surface-soft: var(--site-color-surface-elevated);
    --surface-blue: var(--site-color-surface-elevated);
    --navy: var(--site-color-heading);
    --text: var(--site-color-text);
    --muted: var(--site-color-muted);
    --soft: var(--site-color-soft);
    --border: var(--site-color-border);
    --border-strong: var(--site-color-border-strong);
    --track: var(--site-color-surface-elevated);
    --accent: var(--site-color-accent-text);
    --accent-strong: var(--site-color-badge-text);
    --accent-soft: var(--site-color-badge);
    --focus: var(--site-color-focus);
}

/* Navy report cards sit above the canvas; tracks stay distinct from their surface. */
html[data-theme="dark"][data-palette="navy"] body.route-tests-show:has(.big-five-result-page),
html[data-theme="dark"][data-palette="navy"] body.route-tests-show .personality-test-screen[data-screen="results"]:has(.big-five-result-page),
html[data-theme="dark"][data-palette="navy"] .account-saved-result-page:has(.big-five-result-page) {
    --track: var(--site-color-border-strong);
    --surface: var(--site-color-surface);
    --surface-soft: var(--site-color-surface-elevated);
    --surface-blue: var(--site-color-surface-elevated);
    --border: var(--site-color-border);
    --border-strong: var(--site-color-border-strong);
}

/* Non-Big-Five reports share neutral theme roles in live and saved rendering. */
html[data-palette] body.route-account-results-show:not(:has(.big-five-result-page)),
html[data-palette] body.route-account-results-show:not(:has(.big-five-result-page)) .site-main,
html[data-palette] .account-saved-result-page:not(:has(.big-five-result-page)) {
    background: var(--site-color-canvas) !important;
    color: var(--site-color-text);
}

html[data-palette] .jungian-results-shell {
    --jp-panel: var(--site-color-surface);
    --jp-soft: var(--site-color-surface-elevated);
    --jp-border: var(--site-color-border);
    --jp-text: var(--site-color-heading);
    --jp-muted: var(--site-color-muted);
}

html[data-palette] .hexaco-result-report {
    --surface: var(--site-color-surface);
    --pt-border: var(--site-color-border);
    --pt-text: var(--site-color-heading);
    --pt-muted: var(--site-color-muted);
}

html[data-palette] .riasec-result-report {
    --result-bg: var(--site-color-canvas);
    --result-surface: var(--site-color-surface);
    --result-primary: var(--site-color-heading);
    --result-text: var(--site-color-text);
    --result-muted: var(--site-color-muted);
    --result-soft: var(--site-color-soft);
    --result-border: var(--site-color-border);
    --result-border-strong: var(--site-color-border-strong);
}

html[data-palette] .jungian-results-shell .jungian-eyebrow,
html[data-palette] .hexaco-result-report .hexaco-result-eyebrow {
    color: var(--site-color-accent-text);
}

html[data-palette] .account-saved-result-actions {
    border-color: var(--site-color-border);
}

html[data-palette] .riasec-result-report :is(.riasec-result-theme-card, .riasec-result-score-row, .riasec-result-method) {
    background: var(--site-color-surface);
    border-color: var(--site-color-border);
}
html[data-palette] .riasec-result-report :is(h2, h3, .riasec-result-code, .riasec-result-method summary) {
    color: var(--site-color-heading);
}
html[data-palette] .riasec-result-report :is(.riasec-result-theme-card p, .riasec-result-section-heading p, .riasec-result-score-head p) {
    color: var(--site-color-muted);
}
html[data-palette] .account-saved-result-button {
    background: var(--site-color-accent-primary);
    border-color: var(--site-color-accent-primary);
    color: var(--site-color-on-accent);
}
html[data-palette] .account-saved-result-button.is-secondary {
    background: var(--site-color-surface);
    border-color: var(--site-color-border-strong);
    color: var(--site-color-text);
}
html[data-palette] .account-saved-result-button.is-danger {
    background: var(--site-color-surface);
    border-color: var(--site-color-danger);
    color: var(--site-color-danger);
}

/* Optional research uses the shared primary action, without changing reports. */
html[data-palette] body.route-tests-show .personality-test-demographics-interstitial .personality-test-btn-primary {
    background: var(--site-color-accent-primary) !important;
    border-color: var(--site-color-accent-primary) !important;
    color: var(--site-color-on-accent) !important;
}
html[data-palette] body.route-tests-show .personality-test-demographics-interstitial .personality-test-btn-primary:is(:hover, :focus-visible) {
    background: var(--site-color-accent-hover) !important;
    border-color: var(--site-color-accent-hover) !important;
}

/* Shared active-question shell; preserve response scales and report palettes. */
html[data-palette] body.personality-test-focus-mode {
    --assessment-bg: var(--site-color-canvas);
    --assessment-surface: var(--site-color-surface);
    --assessment-primary: var(--site-color-heading);
    --assessment-primary-hover: var(--site-color-heading-hover);
    --assessment-text: var(--site-color-text);
    --assessment-muted: var(--site-color-muted);
    --assessment-soft: var(--site-color-soft);
    --assessment-border: var(--site-color-border);
    --assessment-border-strong: var(--site-color-border-strong);
}
html[data-palette] .assessment-feedback :is(h2, legend, .assessment-feedback__comment > span) {
    color: var(--site-color-heading);
}
html[data-palette] .assessment-feedback__status {
    color: var(--site-color-success);
    background: var(--site-color-success-soft);
}
html[data-palette] .assessment-feedback__status.is-error {
    color: var(--site-color-danger);
    background: var(--site-color-danger-soft);
}

/* Editorial/information colour roles; page styles retain all geometry. */
html[data-palette] :is(.policy-summary-icon, .donate-purpose-icon) {
    background: var(--site-color-badge);
    color: var(--site-color-badge-text);
}
html[data-palette] .contact-method-icon,
html[data-palette] .learn-article-table th,
html[data-palette] .article-prose code:not(pre code) {
    background: var(--site-color-surface-elevated);
}
html[data-palette] .contact-policy-card > a:hover {
    background: var(--site-color-surface-elevated);
}
html[data-theme="dark"][data-palette] .article-assessment-card .sidebar-cta-title {
    color: var(--site-color-heading) !important;
}
html[data-theme="dark"][data-palette] .article-assessment-card :is(.sidebar-cta-label, .sidebar-cta-desc) {
    color: var(--site-color-muted) !important;
}

/* Public page colour adapters. Keep page-family layouts in their own files. */
html[data-palette] body.route-home .reference-home {
    --home-bg: var(--site-color-canvas);
    --home-surface: var(--site-color-surface);
    --home-primary: var(--site-color-heading);
    --home-primary-hover: var(--site-color-heading-hover);
    --home-text: var(--site-color-text);
    --home-muted: var(--site-color-muted);
    --home-soft: var(--site-color-soft);
    --home-border: var(--site-color-border);
    --home-border-strong: var(--site-color-border-strong);
    --home-accent: var(--site-color-accent-text);
    --home-accent-soft: var(--site-color-badge);
    --home-button-bg: var(--site-color-accent-primary);
    --home-button-hover: var(--site-color-accent-hover);
}

html[data-palette] body.route-tests-index .test-directory {
    --directory-bg: var(--site-color-canvas);
    --directory-surface: var(--site-color-surface);
    --directory-primary: var(--site-color-heading);
    --directory-primary-hover: var(--site-color-heading-hover);
    --directory-text: var(--site-color-text);
    --directory-muted: var(--site-color-muted);
    --directory-soft: var(--site-color-soft);
    --directory-border: var(--site-color-border);
    --directory-border-strong: var(--site-color-border-strong);
    --directory-accent: var(--site-color-accent-text);
    --directory-active-bg: var(--site-color-success-soft);
    --directory-active-text: var(--site-color-success);
    --directory-planned-bg: var(--site-color-surface-elevated);
    --directory-planned-text: var(--site-color-muted);
}

html[data-palette] body.route-tests-index .test-directory-filters span {
    background: var(--site-color-surface-elevated);
    color: var(--site-color-muted);
}
html[data-palette] body.route-tests-index .test-directory-filters a.is-active span {
    background: var(--site-color-badge);
    color: var(--site-color-badge-text);
}

html[data-palette] body.route-search,
html[data-palette] body.route-search .site-main,
html[data-palette] .site-search-page { background: var(--site-color-canvas); color: var(--site-color-text); }
html[data-palette] .site-search-page :is(h1,h2,.site-search-result strong,.site-search-form > label,.site-search-summary strong) {
    color: var(--site-color-heading);
}
html[data-palette] .site-search-page :is(.site-search-header > p:last-child,.site-search-summary,.site-search-result-description,.site-search-introduction p,.site-search-empty p) {
    color: var(--site-color-muted);
}
html[data-palette] .site-search-page .site-search-group-limit { color: var(--site-color-soft); }
html[data-palette] .site-search-field input::placeholder { color: var(--site-color-soft); }
html[data-palette] .site-search-page :is(.site-search-introduction,.site-search-empty) {
    background: var(--site-color-surface); border-color: var(--site-color-border);
}
html[data-palette] .site-search-field { background: var(--site-color-input); border-color: var(--site-color-border-strong); }
html[data-palette] .site-search-field input { color: var(--site-color-text); }
html[data-palette] .site-search-field:focus-within { border-color: var(--site-color-focus); }
html[data-palette] .site-search-field button { background: var(--site-color-accent-primary); border-color: var(--site-color-accent-primary); color: var(--site-color-on-accent); }
html[data-palette] .site-search-field button:hover,
html[data-palette] .site-search-field button:focus-visible { background: var(--site-color-accent-hover); border-color: var(--site-color-accent-hover); }
html[data-palette] .site-search-page :is(.site-search-results,.site-search-group,.site-search-result-list,.site-search-result) { border-color: var(--site-color-border); }
html[data-palette] .site-search-result:hover,
html[data-palette] .site-search-result:focus-visible { background: var(--site-color-surface-elevated); }
html[data-palette] .site-search-page :is(.site-search-result-eyebrow,.site-search-result-arrow,.site-search-examples a,.site-search-empty > div a) { color: var(--site-color-accent-text); border-color: var(--site-color-border-strong); }
html[data-palette] .site-search-page :is(.site-search-examples a,.site-search-empty > div a):is(:hover,:focus-visible) { background: var(--site-color-badge); border-color: var(--site-color-focus); }

/* Account dark surfaces use the same palette as the surrounding dashboard.
 * Geometry and interaction semantics remain owned by account-page.css. */
html[data-theme="dark"][data-palette] body.route-account :is(
    .account-reference-form,
    .account-reference-profile-details[open] > summary
) {
    background: var(--site-color-surface-elevated);
}

html[data-theme="dark"][data-palette] body.route-account .account-reference-form small {
    color: var(--site-color-danger) !important;
}

html[data-theme="dark"][data-palette] body.route-account :is(
    .account-saved-articles-card, .account-saved-articles-header,
    .account-saved-article-row, .account-saved-articles-empty,
    .account-result-bookmark, .account-result-remove
) {
    background: var(--site-color-surface);
    border-color: var(--site-color-border);
}

html[data-theme="dark"][data-palette] body.route-account :is(
    .account-saved-articles-header h2, .account-saved-article-copy strong,
    .account-saved-articles-empty h3
) { color: var(--site-color-heading); }

html[data-theme="dark"][data-palette] body.route-account :is(
    .account-saved-articles-header p, .account-saved-article-copy > span,
    .account-saved-articles-empty p
) { color: var(--site-color-muted); }

html[data-theme="dark"][data-palette] body.route-account :is(
    .account-saved-articles-empty-icon, .account-result-bookmark.is-bookmarked,
    .account-result-bookmark:hover, .account-result-bookmark:focus-visible
) {
    background: var(--site-color-badge);
    border-color: var(--site-color-badge-border);
    color: var(--site-color-badge-text);
}

html[data-theme="dark"][data-palette] body.route-account :is(
    .account-result-remove:hover, .account-result-remove:focus-visible
) {
    background: var(--site-color-danger-soft);
    border-color: var(--site-color-danger);
    color: var(--site-color-danger);
}

html[data-palette] .site-header {
    --header-dropdown-surface: var(--site-color-surface);
    border-color: var(--site-color-border);
    background-color: var(--site-color-surface);
    color: var(--site-color-heading);
}

html[data-palette] .site-header .brand-link,
html[data-palette] .site-header .nav-link,
html[data-palette] .site-header .mobile-user-link,
html[data-palette] .site-header .menu-toggle,
html[data-palette] .site-header .dropdown-menu li a {
    color: var(--site-color-heading);
}

html[data-palette] .site-header .nav-link:hover,
html[data-palette] .site-header .nav-link:focus-visible,
html[data-palette] .site-header .nav-link:active,
html[data-palette] .site-header .nav-item.active .nav-link {
    color: var(--site-color-accent-text);
}

html[data-palette] .site-header .dropdown-menu {
    border-color: var(--site-color-border);
    background-color: var(--site-color-surface);
}

html[data-palette] .site-header .dropdown-menu li a:hover,
html[data-palette] .site-header .dropdown-menu li a:focus-visible {
    background-color: var(--site-color-surface-elevated);
    color: var(--site-color-accent-text);
}

html[data-palette] .site-header .header-search-toggle,
html[data-palette] .site-header .header-search-submit,
html[data-palette] .site-header .header-search-close {
    color: var(--site-color-muted);
}

html[data-palette] .site-header .header-search-toggle:hover,
html[data-palette] .site-header .header-search-toggle:focus-visible,
html[data-palette] .site-header .header-search-submit:hover,
html[data-palette] .site-header .header-search-submit:focus-visible {
    background: var(--site-color-surface-elevated);
    color: var(--site-color-accent-text);
}

html[data-palette] .site-header .header-search-form,
html[data-palette] .site-header .header-search-form input {
    border-color: var(--site-color-border-strong);
    background: var(--site-color-input);
    color: var(--site-color-text);
}

html[data-palette] .site-header .header-search-form input::placeholder {
    color: var(--site-color-soft);
}

html[data-palette] .site-header .btn-login-desktop:not(.btn-login-desktop--guest) {
    border-color: var(--site-color-accent);
    background-color: var(--site-color-accent);
    color: var(--site-color-on-accent);
}

html[data-palette] .site-header .btn-login-desktop:not(.btn-login-desktop--guest):hover,
html[data-palette] .site-header .btn-login-desktop:not(.btn-login-desktop--guest):focus-visible {
    border-color: var(--site-color-accent-hover);
    background-color: var(--site-color-accent-hover);
    color: var(--site-color-on-accent);
}

html[data-palette] .site-header .btn-login-desktop--guest {
    border-color: transparent;
    background-color: transparent;
    color: var(--site-color-heading);
}

html[data-palette] .site-header .btn-login-desktop--guest:hover,
html[data-palette] .site-header .btn-login-desktop--guest:focus-visible {
    border-color: var(--site-color-border);
    background-color: var(--site-color-surface-elevated);
    color: var(--site-color-heading-hover);
}

html[data-palette] .site-header .theme-icon-button.style-25 {
    border-color: transparent;
    background: transparent;
    color: var(--site-color-heading);
}

html[data-palette] .site-header .theme-icon-button .sun-icon svg {
    color: var(--site-color-heading);
}

html[data-palette] .site-header .theme-icon-button:hover {
    border-color: var(--site-color-border-strong);
    background: var(--site-color-surface-elevated);
}

@media (max-width: 991px) {
    html[data-palette] .site-header .mobile-nav-panel {
        --mobile-menu-background: var(--site-color-surface);
        --mobile-menu-text: var(--site-color-heading);
        --mobile-menu-muted: var(--site-color-muted);
        --mobile-menu-border: var(--site-color-border);
        --mobile-menu-control: var(--site-color-input);
        --mobile-menu-accent: var(--site-color-accent-text);
    }
}

/* Administration uses its existing layout with the same palette source. */
html[data-palette] {
    --admin-bg: var(--site-color-canvas);
    --admin-surface: var(--site-color-surface);
    --admin-surface-subtle: var(--site-color-surface-elevated);
    --admin-text: var(--site-color-text);
    --admin-muted: var(--site-color-muted);
    --admin-soft: var(--site-color-soft);
    --admin-line: var(--site-color-border);
    --admin-line-strong: var(--site-color-border-strong);
    --admin-accent: var(--site-color-accent-text);
    --admin-accent-soft: var(--site-color-accent-soft);
    --admin-navy: var(--site-color-accent);
    --admin-success: var(--site-color-success);
    --admin-success-soft: var(--site-color-success-soft);
    --admin-warning: var(--site-color-warning);
    --admin-warning-soft: var(--site-color-warning-soft);
    --admin-critical: var(--site-color-danger);
    --admin-critical-soft: var(--site-color-danger-soft);
}

html[data-palette] .admin-filter-bar button {
    border-color: var(--site-color-accent);
    background: var(--site-color-accent);
    color: var(--site-color-on-accent);
}

/* Existing solid controls/graphics must not inherit the lighter link ink. */
html[data-palette] .admin-rating-distribution__track > span {
    background: var(--site-color-accent-primary);
}

html[data-theme="dark"][data-palette] .article-helpfulness-rating.is-selected {
    border-color: var(--site-color-accent-primary) !important;
    background: var(--site-color-accent-primary) !important;
}