/*
 * Site-wide appearance theming.
 * Driven by html[data-a11y-palette], [data-a11y-weight], [data-a11y-text].
 * Palettes set surface/text tokens. Accent is skipped when brand-locked.
 */

:root {
    --a11y-weight: 400;
    --a11y-heading-weight: 600;
    --a11y-text-scale: 1;
}

/* --- Font weight --- */
html[data-a11y-weight="medium"] {
    --a11y-weight: 500;
    --a11y-heading-weight: 650;
}
html[data-a11y-weight="bold"] {
    --a11y-weight: 600;
    --a11y-heading-weight: 700;
}

body {
    font-weight: var(--a11y-weight);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--a11y-heading-weight);
}

/* --- Body copy scale (does not inflate chrome / root zoom) --- */
html[data-a11y-text="lg"] {
    --a11y-text-scale: 1.08;
}
html[data-a11y-text="xl"] {
    --a11y-text-scale: 1.16;
}

html[data-a11y-text="lg"] p,
html[data-a11y-text="lg"] li,
html[data-a11y-text="lg"] td,
html[data-a11y-text="lg"] .form-control,
html[data-a11y-text="xl"] p,
html[data-a11y-text="xl"] li,
html[data-a11y-text="xl"] td,
html[data-a11y-text="xl"] .form-control {
    font-size: calc(1rem * var(--a11y-text-scale));
}

/* --- Palette helpers --- */
html[data-a11y-palette]:not([data-a11y-palette="default"]) {
    --bs-body-bg: var(--background-color);
    --bs-body-color: var(--text-color);
}

/* ========== Ocean ========== */
html[data-a11y-palette="ocean"] {
    --background-color: #f2fbfd;
    --card-background: #ffffff;
    --text-color: #14343d;
    --heading-color: #0b2830;
    --text-muted: #4a6d75;
    --border-color: #cfeaf1;
    --glass-bg: rgba(242, 251, 253, 0.95);
    --glass-sub-bg: rgba(255, 255, 255, 0.92);
    --glass-dropdown-bg: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(8, 145, 178, 0.12);
}
html[data-a11y-palette="ocean"][data-bs-theme="dark"] {
    --background-color: #06202a;
    --card-background: #0c4a6e;
    --text-color: #e0f4f8;
    --heading-color: #f0fbfd;
    --text-muted: #9ec8d4;
    --border-color: rgba(34, 211, 238, 0.25);
    --glass-bg: rgba(6, 32, 42, 0.95);
    --glass-sub-bg: rgba(12, 74, 110, 0.92);
    --glass-dropdown-bg: rgba(12, 74, 110, 0.98);
    --glass-border: rgba(34, 211, 238, 0.18);
}
html:not([data-brand-locked="1"])[data-a11y-palette="ocean"] {
    --primary-color: #0891b2;
    --primary-hover: #0e7490;
    --bs-primary: #0891b2;
}
html:not([data-brand-locked="1"])[data-a11y-palette="ocean"][data-bs-theme="dark"] {
    --primary-color: #22d3ee;
    --primary-hover: #67e8f9;
    --bs-primary: #22d3ee;
}

/* ========== Forest ========== */
html[data-a11y-palette="forest"] {
    --background-color: #f3f8f4;
    --card-background: #ffffff;
    --text-color: #1d3324;
    --heading-color: #14241a;
    --text-muted: #5a7262;
    --border-color: #d3e4d6;
    --glass-bg: rgba(243, 248, 244, 0.95);
    --glass-sub-bg: rgba(255, 255, 255, 0.92);
    --glass-dropdown-bg: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(82, 139, 91, 0.12);
}
html[data-a11y-palette="forest"][data-bs-theme="dark"] {
    --background-color: #121a16;
    --card-background: #1a2420;
    --text-color: #dce8df;
    --heading-color: #f1f7f2;
    --text-muted: #9bb3a2;
    --border-color: rgba(125, 184, 138, 0.25);
    --glass-bg: rgba(18, 26, 22, 0.95);
    --glass-sub-bg: rgba(26, 36, 32, 0.92);
    --glass-dropdown-bg: rgba(26, 36, 32, 0.98);
    --glass-border: rgba(125, 184, 138, 0.18);
}
html:not([data-brand-locked="1"])[data-a11y-palette="forest"] {
    --primary-color: #528B5B;
    --primary-hover: #42734a;
    --bs-primary: #528B5B;
}
html:not([data-brand-locked="1"])[data-a11y-palette="forest"][data-bs-theme="dark"] {
    --primary-color: #7db88a;
    --primary-hover: #9dccb0;
    --bs-primary: #7db88a;
}

/* ========== Lavender ========== */
html[data-a11y-palette="lavender"] {
    --background-color: #f7f5fb;
    --card-background: #ffffff;
    --text-color: #2a2438;
    --heading-color: #1c1730;
    --text-muted: #6a6278;
    --border-color: #e2dcec;
    --glass-bg: rgba(247, 245, 251, 0.95);
    --glass-sub-bg: rgba(255, 255, 255, 0.92);
    --glass-dropdown-bg: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(107, 91, 149, 0.12);
}
html[data-a11y-palette="lavender"][data-bs-theme="dark"] {
    --background-color: #16121e;
    --card-background: #1e1a28;
    --text-color: #e6e0ef;
    --heading-color: #f4f1f8;
    --text-muted: #b0a6c2;
    --border-color: rgba(168, 152, 200, 0.22);
    --glass-bg: rgba(22, 18, 30, 0.95);
    --glass-sub-bg: rgba(30, 26, 40, 0.92);
    --glass-dropdown-bg: rgba(30, 26, 40, 0.98);
    --glass-border: rgba(168, 152, 200, 0.18);
}
html:not([data-brand-locked="1"])[data-a11y-palette="lavender"] {
    --primary-color: #6B5B95;
    --primary-hover: #584a7c;
    --bs-primary: #6B5B95;
}
html:not([data-brand-locked="1"])[data-a11y-palette="lavender"][data-bs-theme="dark"] {
    --primary-color: #a898c8;
    --primary-hover: #c4b8dc;
    --bs-primary: #a898c8;
}

/* ========== Warm ========== */
html[data-a11y-palette="warm"] {
    --background-color: #fbf6f1;
    --card-background: #ffffff;
    --text-color: #3a2c24;
    --heading-color: #2a1e18;
    --text-muted: #7a6558;
    --border-color: #ead9cc;
    --glass-bg: rgba(251, 246, 241, 0.95);
    --glass-sub-bg: rgba(255, 255, 255, 0.92);
    --glass-dropdown-bg: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(184, 107, 74, 0.12);
}
html[data-a11y-palette="warm"][data-bs-theme="dark"] {
    --background-color: #1c1612;
    --card-background: #251f1a;
    --text-color: #f0e4d8;
    --heading-color: #faf4ee;
    --text-muted: #c4b0a0;
    --border-color: rgba(212, 147, 122, 0.25);
    --glass-bg: rgba(28, 22, 18, 0.95);
    --glass-sub-bg: rgba(37, 31, 26, 0.92);
    --glass-dropdown-bg: rgba(37, 31, 26, 0.98);
    --glass-border: rgba(212, 147, 122, 0.18);
}
html:not([data-brand-locked="1"])[data-a11y-palette="warm"] {
    --primary-color: #B86B4A;
    --primary-hover: #9a573c;
    --bs-primary: #B86B4A;
}
html:not([data-brand-locked="1"])[data-a11y-palette="warm"][data-bs-theme="dark"] {
    --primary-color: #d4937a;
    --primary-hover: #e3b09c;
    --bs-primary: #d4937a;
}

/* ========== Slate ========== */
html[data-a11y-palette="slate"] {
    --background-color: #f1f5f9;
    --card-background: #ffffff;
    --text-color: #1e293b;
    --heading-color: #0f172a;
    --text-muted: #64748b;
    --border-color: #d8e0ea;
    --glass-bg: rgba(241, 245, 249, 0.95);
    --glass-sub-bg: rgba(255, 255, 255, 0.92);
    --glass-dropdown-bg: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(71, 85, 105, 0.12);
}
html[data-a11y-palette="slate"][data-bs-theme="dark"] {
    --background-color: #0f172a;
    --card-background: #1e293b;
    --text-color: #e2e8f0;
    --heading-color: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: rgba(148, 163, 184, 0.2);
    --glass-bg: rgba(15, 23, 42, 0.95);
    --glass-sub-bg: rgba(30, 41, 59, 0.92);
    --glass-dropdown-bg: rgba(30, 41, 59, 0.98);
    --glass-border: rgba(148, 163, 184, 0.18);
}
html:not([data-brand-locked="1"])[data-a11y-palette="slate"] {
    --primary-color: #475569;
    --primary-hover: #334155;
    --bs-primary: #475569;
}
html:not([data-brand-locked="1"])[data-a11y-palette="slate"][data-bs-theme="dark"] {
    --primary-color: #94a3b8;
    --primary-hover: #cbd5e1;
    --bs-primary: #94a3b8;
}

/* --- Accessibility / Theme wizard --- */
.appearance-swatch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}
.appearance-swatch {
    border: 2px solid var(--border-color);
    border-radius: 0.6rem;
    padding: 0.55rem 0.4rem 0.45rem;
    background: var(--card-background);
    color: var(--text-color);
    text-align: center;
    cursor: pointer;
}
.appearance-swatch:hover,
.appearance-swatch:focus-visible {
    border-color: var(--primary-color);
}
.appearance-swatch.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 28%, transparent);
}
.appearance-swatch-chip {
    display: block;
    height: 1.35rem;
    border-radius: 999px;
    margin: 0 auto 0.4rem;
    width: 100%;
    max-width: 4.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.appearance-swatch-chip[data-swatch="default"] { background: linear-gradient(90deg, #f8f9fa 50%, #0056b3 50%); }
.appearance-swatch-chip[data-swatch="ocean"] { background: linear-gradient(90deg, #f2fbfd 50%, #0891b2 50%); }
.appearance-swatch-chip[data-swatch="forest"] { background: linear-gradient(90deg, #f3f8f4 50%, #528B5B 50%); }
.appearance-swatch-chip[data-swatch="lavender"] { background: linear-gradient(90deg, #f7f5fb 50%, #6B5B95 50%); }
.appearance-swatch-chip[data-swatch="warm"] { background: linear-gradient(90deg, #fbf6f1 50%, #B86B4A 50%); }
.appearance-swatch-chip[data-swatch="slate"] { background: linear-gradient(90deg, #f1f5f9 50%, #475569 50%); }
.appearance-swatch-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
}
.appearance-mode-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.appearance-mode-btn {
    border: 2px solid var(--border-color);
    border-radius: 0.55rem;
    background: var(--card-background);
    color: var(--text-color);
    padding: 0.65rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.appearance-mode-btn.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

.appearance-wizard-modal {
    z-index: 1080;
}
.appearance-wizard-modal .modal-content {
    background: var(--card-background);
    color: var(--text-color);
}
.appearance-wizard-modal .modal-header,
.appearance-wizard-modal .modal-footer {
    border-color: var(--border-color);
    background: var(--card-background);
}
.appearance-wizard-modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
}
.appearance-wizard-stepper {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
.appearance-wizard-stepper > li {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.appearance-wizard-stepper > li:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    margin: 0 0.35rem;
    margin-bottom: 1.1rem;
    background: var(--border-color);
}
.appearance-wizard-stepper > li:has(.is-done):not(:last-child)::after,
.appearance-wizard-stepper > li:has(.is-current):not(:last-child)::after {
    background: var(--primary-color);
}
.appearance-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    min-width: 3.5rem;
}
.appearance-wizard-step:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.appearance-wizard-step:not(:disabled) {
    cursor: pointer;
}
.appearance-wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 2px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--card-background);
}
.appearance-wizard-step-name {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}
.appearance-wizard-step.is-current {
    color: var(--text-color);
}
.appearance-wizard-step.is-current .appearance-wizard-step-num {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}
.appearance-wizard-step.is-done {
    color: var(--text-color);
}
.appearance-wizard-step.is-done .appearance-wizard-step-num {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}
.appearance-wizard-pane { display: none; }
.appearance-wizard-pane.is-active { display: block; }
.appearance-wizard-modal .a11y-preview-box {
    background: var(--background-color);
}

@media (max-width: 575.98px) {
    .appearance-wizard-step-name {
        font-size: 0.68rem;
    }
    .appearance-wizard-step {
        min-width: 0;
    }
}