/**
 * Verion Visual Themes — professional chrome packs
 * Each theme owns: tokens + header + nav + banner + sidebar menus + footer + brand mark.
 */

/* —— Shared chrome wired to theme tokens —— */
body.cos-app--workspace,
html[data-cos-theme] body.cos-app--workspace {
    background: var(--cos-color-surface-2, var(--cos-surface-2));
    color: var(--cos-color-ink, var(--cos-ink));
}

body.cos-app--workspace .cos-site-header,
html[data-cos-theme] .cos-site-header {
    background: var(--cos-header-bg, rgba(255, 255, 255, 0.92));
    border-bottom: 1px solid var(--cos-header-border, var(--cos-color-border));
    color: var(--cos-header-ink, var(--cos-color-ink));
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

body.cos-app--workspace .cos-site-header .cos-brand,
body.cos-app--workspace .cos-site-header .cos-nav a,
body.cos-app--workspace .cos-site-header .cos-btn--ghost,
body.cos-app--workspace .cos-site-header .cos-user-chip,
html[data-cos-theme] .cos-site-header .cos-brand,
html[data-cos-theme] .cos-site-header .cos-nav a {
    color: inherit;
}

body.cos-app--workspace .cos-site-header .cos-brand__text span,
html[data-cos-theme] .cos-site-header .cos-brand__text span {
    color: var(--cos-color-brand);
}

body.cos-app--workspace .cos-site-header .cos-nav a:hover,
body.cos-app--workspace .cos-site-header .cos-nav a.is-active,
html[data-cos-theme] .cos-site-header .cos-nav a:hover,
html[data-cos-theme] .cos-site-header .cos-nav a.is-active {
    background: var(--cos-nav-active-bg);
    color: var(--cos-header-ink, var(--cos-color-ink));
}

body.cos-app--workspace .cos-brand__mark,
html[data-cos-theme] .cos-brand__mark {
    background: var(--cos-brand-mark, linear-gradient(145deg, var(--cos-color-accent), var(--cos-color-brand)));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--cos-color-brand) 32%, transparent);
}

/* Theme banner strip under site header */
.cos-theme-banner {
    position: relative;
    height: 0.35rem;
    background: var(--cos-banner-gradient, var(--cos-color-brand));
    overflow: hidden;
}
.cos-theme-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    animation: cos-theme-sheen 7s linear infinite;
}
@keyframes cos-theme-sheen {
    from { transform: translateX(-40%); }
    to { transform: translateX(40%); }
}

.cos-theme-hero-banner {
    margin: 0 0 var(--cos-space-5, 1.5rem);
    padding: 1.35rem 1.5rem;
    border-radius: var(--cos-radius-xl, 1.15rem);
    background: var(--cos-banner-gradient);
    color: var(--cos-banner-ink, #fff);
    border: 1px solid color-mix(in srgb, var(--cos-banner-ink, #fff) 18%, transparent);
    box-shadow: var(--cos-shadow-md, 0 12px 32px rgba(15, 23, 42, 0.12));
    position: relative;
    overflow: hidden;
}
.cos-theme-hero-banner::before {
    content: "";
    position: absolute;
    inset: auto -10% -60% auto;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cos-banner-ink, #fff) 14%, transparent);
    pointer-events: none;
}
.cos-theme-hero-banner__title {
    font-family: var(--cos-type-display, var(--cos-font-display));
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.25rem;
    position: relative;
}
.cos-theme-hero-banner__sub {
    margin: 0;
    opacity: 0.9;
    font-size: 0.92rem;
    max-width: 42rem;
    position: relative;
}

/* Sidebar / menus */
body.cos-app--workspace .cos-sidebar {
    background: var(--cos-sidebar-bg, var(--cos-color-surface));
    border-inline-end-color: var(--cos-color-border);
    color: var(--cos-color-ink);
}
body.cos-app--workspace .cos-sidebar .nav-link:hover,
body.cos-app--workspace .cos-sidebar .nav-link.active {
    background: var(--cos-nav-active-bg);
    color: var(--cos-color-brand);
}
body.cos-app--workspace .cos-sidebar__badge {
    border: 1px solid var(--cos-color-border);
    background: color-mix(in srgb, var(--cos-color-brand) 12%, transparent);
    color: var(--cos-color-brand);
}

/* Footer */
body.cos-app--workspace .cos-workspace-footer {
    background: var(--cos-footer-bg, var(--cos-color-surface-2));
    color: var(--cos-footer-ink, var(--cos-color-muted));
    border-top: 1px solid var(--cos-color-border);
}

/* Buttons in header follow brand */
body.cos-app--workspace .cos-site-header .cos-btn--primary {
    background: var(--cos-color-brand);
    border-color: var(--cos-color-brand);
    color: var(--cos-banner-ink, #fff);
}

/* —— Per-theme token packs (v2 enterprise) —— */
:root,
[data-cos-theme="modern_white"] {
    --cos-color-ink: #0B1220;
    --cos-color-muted: #64748B;
    --cos-color-brand: #0F766E;
    --cos-color-accent: #14B8A6;
    --cos-color-surface: #FFFFFF;
    --cos-color-surface-2: #F4F7F6;
    --cos-color-border: rgba(15, 118, 110, 0.13);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: rgba(255, 255, 255, 0.94);
    --cos-header-border: rgba(15, 118, 110, 0.10);
    --cos-header-ink: #0B1220;
    --cos-nav-active-bg: rgba(15, 118, 110, 0.09);
    --cos-sidebar-bg: rgba(255, 255, 255, 0.97);
    --cos-footer-bg: #EEF3F2;
    --cos-footer-ink: #64748B;
    --cos-banner-gradient: linear-gradient(115deg, #0D9488 0%, #0F766E 42%, #14B8A6 100%);
    --cos-banner-ink: #ECFDF8;
    --cos-brand-mark: linear-gradient(145deg, #5EEAD4, #0F766E 55%, #115E59);
    --cos-chart-1: #0F766E;
    --cos-chart-2: #14B8A6;
    --cos-radius-md: 1rem;
    --cos-radius-lg: 1rem;
    --cos-radius-xl: 1rem;
    --cos-shadow-md: 0 8px 28px rgba(15, 118, 110, 0.08);
}
[data-cos-theme="modern_white"] .cos-ws-widget,
[data-cos-theme="modern_white"] .cos-panel {
    border-radius: var(--cos-radius-lg);
    box-shadow: var(--cos-shadow-md);
}

[data-cos-theme="executive_dark"] {
    --cos-color-ink: #FAF6E8;
    --cos-color-muted: #A8A29E;
    --cos-color-brand: #D4AF37;
    --cos-color-accent: #E8D48B;
    --cos-color-surface: #121214;
    --cos-color-surface-2: #1A1A1D;
    --cos-color-border: rgba(212, 175, 55, 0.30);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: rgba(9, 9, 11, 0.97);
    --cos-header-border: rgba(212, 175, 55, 0.38);
    --cos-header-ink: #FAF6E8;
    --cos-nav-active-bg: rgba(212, 175, 55, 0.14);
    --cos-sidebar-bg: #0C0C0E;
    --cos-footer-bg: #09090B;
    --cos-footer-ink: #A8A29E;
    --cos-banner-gradient: linear-gradient(115deg, #09090B 0%, #1A160C 48%, #D4AF37 100%);
    --cos-banner-ink: #FAF6E8;
    --cos-brand-mark: linear-gradient(145deg, #E8D48B, #D4AF37 50%, #8B6914);
    --cos-chart-1: #D4AF37;
    --cos-chart-2: #E8D48B;
    --cos-radius-md: 0.4rem;
    --cos-radius-lg: 0.4rem;
    --cos-radius-xl: 0.4rem;
    --cos-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --cos-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}
[data-cos-theme="executive_dark"] .cos-theme-banner {
    height: 0.28rem;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}
[data-cos-theme="executive_dark"] .cos-workspace-topbar h1 {
    color: #E8D48B;
    letter-spacing: 0.02em;
}
[data-cos-theme="executive_dark"] .cos-ws-widget,
[data-cos-theme="executive_dark"] .cos-panel {
    border-radius: var(--cos-radius-md);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12);
}

[data-cos-theme="enterprise_blue"] {
    --cos-color-ink: #0F172A;
    --cos-color-muted: #64748B;
    --cos-color-brand: #1E40AF;
    --cos-color-accent: #3B82F6;
    --cos-color-surface: #F8FAFC;
    --cos-color-surface-2: #EFF6FF;
    --cos-color-border: rgba(30, 64, 175, 0.16);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: #0A1628;
    --cos-header-border: rgba(96, 165, 250, 0.30);
    --cos-header-ink: #F8FAFC;
    --cos-nav-active-bg: rgba(59, 130, 246, 0.16);
    --cos-sidebar-bg: #FFFFFF;
    --cos-footer-bg: #0A1628;
    --cos-footer-ink: #94A3B8;
    --cos-banner-gradient: linear-gradient(115deg, #0A1628 0%, #1E40AF 48%, #3B82F6 100%);
    --cos-banner-ink: #EFF6FF;
    --cos-brand-mark: linear-gradient(145deg, #93C5FD, #1E40AF 55%, #1E3A8A);
    --cos-chart-1: #1E40AF;
    --cos-chart-2: #3B82F6;
    --cos-status-info: #1E40AF;
    --cos-radius-md: 0.65rem;
    --cos-radius-lg: 0.65rem;
    --cos-shadow-md: 0 10px 30px rgba(10, 22, 40, 0.10);
}
[data-cos-theme="enterprise_blue"] .cos-site-header .cos-brand__text span {
    color: #93C5FD;
}
[data-cos-theme="enterprise_blue"] .cos-theme-hero-banner {
    box-shadow: 0 16px 40px rgba(10, 22, 40, 0.22);
}

[data-cos-theme="cyber"] {
    --cos-color-ink: #E0F2FE;
    --cos-color-muted: #94A3B8;
    --cos-color-brand: #22D3EE;
    --cos-color-accent: #A78BFA;
    --cos-color-surface: #0A1224;
    --cos-color-surface-2: #111B33;
    --cos-color-border: rgba(34, 211, 238, 0.28);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: rgba(3, 7, 18, 0.97);
    --cos-header-border: rgba(34, 211, 238, 0.38);
    --cos-header-ink: #E0F2FE;
    --cos-nav-active-bg: rgba(34, 211, 238, 0.14);
    --cos-sidebar-bg: #060D1A;
    --cos-footer-bg: #030712;
    --cos-footer-ink: #94A3B8;
    --cos-banner-gradient: linear-gradient(115deg, #030712 0%, #0C1A36 42%, #22D3EE 100%);
    --cos-banner-ink: #ECFEFF;
    --cos-brand-mark: linear-gradient(145deg, #67E8F9, #22D3EE 38%, #A78BFA);
    --cos-chart-1: #22D3EE;
    --cos-chart-2: #A78BFA;
    --cos-chart-3: #34D399;
    --cos-radius-md: 0.5rem;
    --cos-radius-lg: 0.5rem;
    --cos-shadow-md: 0 0 28px rgba(34, 211, 238, 0.18);
    color-scheme: dark;
}
[data-cos-theme="cyber"] .cos-theme-banner {
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.55);
}
[data-cos-theme="cyber"] .cos-sidebar .nav-link.active {
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35);
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}
[data-cos-theme="cyber"] .cos-theme-hero-banner {
    background-image:
        linear-gradient(115deg, #030712 0%, #0C1A36 42%, #22D3EE 100%),
        repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(34, 211, 238, 0.06) 12px);
}
[data-cos-theme="cyber"] .cos-brand__mark {
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
}

[data-cos-theme="glass"] {
    --cos-color-ink: #1E1B4B;
    --cos-color-muted: #64748B;
    --cos-color-brand: #4F46E5;
    --cos-color-accent: #7C3AED;
    --cos-color-surface: rgba(255, 255, 255, 0.74);
    --cos-color-surface-2: rgba(238, 242, 255, 0.88);
    --cos-color-border: rgba(79, 70, 229, 0.20);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: rgba(255, 255, 255, 0.58);
    --cos-header-border: rgba(79, 70, 229, 0.16);
    --cos-header-ink: #1E1B4B;
    --cos-nav-active-bg: rgba(79, 70, 229, 0.11);
    --cos-sidebar-bg: rgba(255, 255, 255, 0.50);
    --cos-footer-bg: rgba(238, 242, 255, 0.78);
    --cos-footer-ink: #64748B;
    --cos-banner-gradient: linear-gradient(115deg, #4338CA 0%, #6D28D9 48%, #A78BFA 100%);
    --cos-banner-ink: #EEF2FF;
    --cos-brand-mark: linear-gradient(145deg, #A5B4FC, #4F46E5 50%, #6D28D9);
    --cos-chart-1: #4F46E5;
    --cos-chart-2: #7C3AED;
    --cos-blur: 18px;
    --cos-radius-md: 1.15rem;
    --cos-radius-lg: 1.15rem;
    --cos-radius-xl: 1.15rem;
    --cos-shadow-md: 0 16px 40px rgba(79, 70, 229, 0.12);
}
[data-cos-theme="glass"] body.cos-app--workspace,
body.cos-app--workspace[data-cos-theme="glass"] {
    background:
        radial-gradient(circle at 12% 8%, rgba(79, 70, 229, 0.18), transparent 42%),
        radial-gradient(circle at 88% 0%, rgba(124, 58, 237, 0.16), transparent 38%),
        #EEF2FF;
}
[data-cos-theme="glass"] .cos-site-header,
[data-cos-theme="glass"] .cos-sidebar,
[data-cos-theme="glass"] .cos-ws-widget,
[data-cos-theme="glass"] .cos-panel,
[data-cos-theme="glass"] .cos-workspace-footer {
    backdrop-filter: blur(var(--cos-blur, 16px));
    -webkit-backdrop-filter: blur(var(--cos-blur, 16px));
}

[data-cos-theme="midnight"] {
    --cos-color-ink: #FAFAFA;
    --cos-color-muted: #A1A1AA;
    --cos-color-brand: #E5E7EB;
    --cos-color-accent: #FFFFFF;
    --cos-color-surface: #050505;
    --cos-color-surface-2: #0A0A0A;
    --cos-color-border: rgba(255, 255, 255, 0.11);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: #000000;
    --cos-header-border: rgba(255, 255, 255, 0.13);
    --cos-header-ink: #FAFAFA;
    --cos-nav-active-bg: rgba(255, 255, 255, 0.08);
    --cos-sidebar-bg: #000000;
    --cos-footer-bg: #000000;
    --cos-footer-ink: #A1A1AA;
    --cos-banner-gradient: linear-gradient(115deg, #000000 0%, #171717 55%, #E5E7EB 100%);
    --cos-banner-ink: #FAFAFA;
    --cos-brand-mark: linear-gradient(145deg, #FFFFFF, #A1A1AA 60%, #3F3F46);
    --cos-chart-1: #E5E7EB;
    --cos-chart-2: #A1A1AA;
    --cos-radius-md: 0.35rem;
    --cos-radius-lg: 0.35rem;
    --cos-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06);
    color-scheme: dark;
}
[data-cos-theme="midnight"] .cos-theme-banner {
    height: 1px;
}
[data-cos-theme="midnight"] .cos-nav a,
[data-cos-theme="midnight"] .cos-sidebar .nav-link {
    border-radius: 0.35rem;
}

[data-cos-theme="high_contrast"] {
    --cos-color-ink: #000000;
    --cos-color-muted: #000000;
    --cos-color-brand: #0000EE;
    --cos-color-accent: #000000;
    --cos-color-surface: #FFFFFF;
    --cos-color-surface-2: #FFFF00;
    --cos-color-border: #000000;
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: #000000;
    --cos-header-border: #FFFF00;
    --cos-header-ink: #FFFFFF;
    --cos-nav-active-bg: #FFFF00;
    --cos-sidebar-bg: #FFFFFF;
    --cos-footer-bg: #000000;
    --cos-footer-ink: #FFFF00;
    --cos-banner-gradient: linear-gradient(90deg, #000000 0%, #FFFF00 100%);
    --cos-banner-ink: #000000;
    --cos-brand-mark: linear-gradient(145deg, #FFFF00, #0000EE);
    --cos-chart-1: #0000EE;
    --cos-chart-2: #000000;
    --cos-radius-md: 0;
    --cos-radius-lg: 0;
    --cos-radius-xl: 0;
    --cos-shadow-md: none;
    --cos-status-success: #006400;
    --cos-status-danger: #8B0000;
    --cos-motion-fast: 0ms;
    --cos-motion-base: 0ms;
}
[data-cos-theme="high_contrast"] .cos-theme-banner::after { display: none; }
[data-cos-theme="high_contrast"] .cos-nav a.is-active,
[data-cos-theme="high_contrast"] .cos-sidebar .nav-link.active {
    color: #000 !important;
    outline: 2px solid #000;
}
[data-cos-theme="high_contrast"] .cos-ws-widget,
[data-cos-theme="high_contrast"] .card,
[data-cos-theme="high_contrast"] .cos-panel {
    border-width: 2px;
    border-radius: 0;
}

[data-cos-theme="corporate"] {
    --cos-color-ink: #1F2937;
    --cos-color-muted: #64748B;
    --cos-color-brand: #334155;
    --cos-color-accent: #475569;
    --cos-color-surface: #F8FAFC;
    --cos-color-surface-2: #F1F5F9;
    --cos-color-border: rgba(51, 65, 85, 0.18);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: #1E293B;
    --cos-header-border: rgba(148, 163, 184, 0.30);
    --cos-header-ink: #F8FAFC;
    --cos-nav-active-bg: rgba(148, 163, 184, 0.18);
    --cos-sidebar-bg: #FFFFFF;
    --cos-footer-bg: #1E293B;
    --cos-footer-ink: #CBD5E1;
    --cos-banner-gradient: linear-gradient(115deg, #1E293B 0%, #334155 50%, #64748B 100%);
    --cos-banner-ink: #F8FAFC;
    --cos-brand-mark: linear-gradient(145deg, #94A3B8, #334155 55%, #0F172A);
    --cos-chart-1: #334155;
    --cos-chart-2: #64748B;
    --cos-radius-md: 0.5rem;
    --cos-radius-lg: 0.5rem;
    --cos-shadow-md: 0 6px 20px rgba(30, 41, 59, 0.08);
}
[data-cos-theme="corporate"] .cos-nav a,
[data-cos-theme="corporate"] .cos-sidebar .nav-link {
    border-radius: 0.4rem;
    font-weight: 600;
}

[data-cos-theme="government"] {
    --cos-color-ink: #14532D;
    --cos-color-muted: #3F6212;
    --cos-color-brand: #166534;
    --cos-color-accent: #CA8A04;
    --cos-color-surface: #F7FEE7;
    --cos-color-surface-2: #ECFCCB;
    --cos-color-border: rgba(22, 101, 52, 0.22);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: #14532D;
    --cos-header-border: rgba(202, 138, 4, 0.48);
    --cos-header-ink: #F7FEE7;
    --cos-nav-active-bg: rgba(202, 138, 4, 0.22);
    --cos-sidebar-bg: #FEFCE8;
    --cos-footer-bg: #14532D;
    --cos-footer-ink: #D9F99D;
    --cos-banner-gradient: linear-gradient(115deg, #14532D 0%, #166534 48%, #CA8A04 100%);
    --cos-banner-ink: #FEFCE8;
    --cos-brand-mark: linear-gradient(145deg, #CA8A04, #166534 50%, #14532D);
    --cos-chart-1: #166534;
    --cos-chart-2: #CA8A04;
    --cos-radius-md: 0.55rem;
    --cos-radius-lg: 0.55rem;
    --cos-shadow-md: 0 8px 24px rgba(20, 83, 45, 0.10);
}
[data-cos-theme="government"] .cos-sidebar__badge {
    background: #CA8A04;
    color: #14532D;
    border-color: #CA8A04;
}
[data-cos-theme="government"] .cos-theme-banner {
    height: 0.45rem;
    background: repeating-linear-gradient(
        90deg,
        #14532D 0 12px,
        #CA8A04 12px 24px,
        #166534 24px 36px
    );
}
[data-cos-theme="government"] .cos-theme-banner::after { display: none; }
[data-cos-theme="government"] .cos-brand__mark {
    border-radius: 50%;
    box-shadow: 0 0 0 2px #CA8A04, 0 8px 20px rgba(20, 83, 45, 0.25);
}

[data-cos-theme="university"] {
    --cos-color-ink: #1E1B4B;
    --cos-color-muted: #6B7280;
    --cos-color-brand: #5B21B6;
    --cos-color-accent: #DB2777;
    --cos-color-surface: #FAF5FF;
    --cos-color-surface-2: #F3E8FF;
    --cos-color-border: rgba(91, 33, 182, 0.18);
    --cos-ink: var(--cos-color-ink);
    --cos-jade: var(--cos-color-brand);
    --cos-surface: var(--cos-color-surface);
    --cos-surface-2: var(--cos-color-surface-2);
    --cos-accent: var(--cos-color-accent);
    --cos-border: var(--cos-color-border);
    --cos-header-bg: #2E1065;
    --cos-header-border: rgba(219, 39, 119, 0.38);
    --cos-header-ink: #FAF5FF;
    --cos-nav-active-bg: rgba(219, 39, 119, 0.16);
    --cos-sidebar-bg: #FFFFFF;
    --cos-footer-bg: #2E1065;
    --cos-footer-ink: #E9D5FF;
    --cos-banner-gradient: linear-gradient(115deg, #2E1065 0%, #5B21B6 46%, #DB2777 100%);
    --cos-banner-ink: #FAF5FF;
    --cos-brand-mark: linear-gradient(145deg, #F472B6, #5B21B6 45%, #2E1065);
    --cos-chart-1: #5B21B6;
    --cos-chart-2: #DB2777;
    --cos-radius-md: 0.85rem;
    --cos-radius-lg: 0.85rem;
    --cos-shadow-md: 0 12px 32px rgba(46, 16, 101, 0.12);
}
[data-cos-theme="university"] .cos-brand__mark {
    border-radius: 50%;
}
[data-cos-theme="university"] .cos-sidebar .nav-link.active {
    background: color-mix(in srgb, #DB2777 14%, transparent);
    color: #5B21B6;
}
[data-cos-theme="university"] .cos-theme-hero-banner {
    border-radius: 1.25rem 0.35rem 1.25rem 0.35rem;
}

/* Dark theme generic text readability on panels */
[data-cos-theme="executive_dark"] .cos-ws-widget,
[data-cos-theme="cyber"] .cos-ws-widget,
[data-cos-theme="midnight"] .cos-ws-widget,
[data-cos-theme="executive_dark"] .cos-panel,
[data-cos-theme="cyber"] .cos-panel,
[data-cos-theme="midnight"] .cos-panel,
[data-cos-theme="executive_dark"] .card,
[data-cos-theme="cyber"] .card,
[data-cos-theme="midnight"] .card {
    background: var(--cos-color-surface-2);
    color: var(--cos-color-ink);
    border-color: var(--cos-color-border);
}

/* Appearance page — rich chrome swatches */
.cos-theme-swatch {
    display: block;
    border: 1px solid var(--cos-color-border, rgba(15, 23, 42, 0.12));
    border-radius: var(--cos-radius-lg, 1rem);
    padding: 0.85rem;
    background: var(--cos-color-surface, #fff);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cos-theme-swatch:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--cos-color-brand) 40%, var(--cos-color-border));
}
.cos-theme-swatch.is-active {
    border-color: var(--cos-color-brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cos-color-brand) 25%, transparent);
}
.cos-theme-swatch__chrome {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}
.cos-theme-swatch__header {
    height: 1.1rem;
    border-radius: 0.35rem 0.35rem 0 0;
    background: var(--preview-header, #111);
    position: relative;
}
.cos-theme-swatch__header::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.45rem;
    top: 50%;
    width: 2.2rem;
    height: 0.28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--preview-ink, #fff) 70%, transparent);
    transform: translateY(-50%);
}
.cos-theme-swatch__banner {
    height: 0.55rem;
    background: var(--preview-banner, var(--swatch));
}
.cos-theme-swatch__body {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.3rem;
    min-height: 2.4rem;
}
.cos-theme-swatch__nav {
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--preview-header, #111) 88%, #fff);
}
.cos-theme-swatch__surface {
    border-radius: 0.25rem;
    background: var(--preview-surface, #f8fafc);
    border: 1px solid color-mix(in srgb, var(--swatch, #0f766e) 20%, transparent);
}
.cos-theme-swatch__footer {
    height: 0.55rem;
    border-radius: 0 0 0.35rem 0.35rem;
    background: var(--preview-header, #111);
    opacity: 0.92;
}

.letter-space { letter-spacing: 0.08em; }