/* * SchoolConsole — Multi-Theme CSS * Eight themes applied via data-theme="" on . * * Light : classic · solar · slate · sakura * Dark : cosmic · aurora · neon · ocean * * Every block overrides only the --sat-* design tokens and a handful of * hard-coded colours in school-admin-theme.css (e.g. table row hover). * FluentUI accent colour is remapped via --accent-fill-rest and related tokens. */ /* ═══════════════════════════════════════════════════════════════════════════ 1. CLASSIC PURPLE (same as :root in school-admin-theme.css — listed here so explicit data-theme="classic" always works) ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="classic"] { --sat-primary: #6C63FF; --sat-primary-light: #EDE9FF; --sat-primary-dark: #4C3DBF; --sat-primary-rgb: 108,99,255; --sat-bg: #F5F6FA; --sat-surface: #ffffff; --sat-surface-2: #F8F9FC; --sat-border: #F0F1F5; --sat-border-input: #E9EBF0; --sat-text: #1B2559; --sat-text-sub: #4A4A69; --sat-text-muted: #9396A5; --sat-shadow: 0 4px 24px rgba(0,0,0,.06); /* FluentUI tokens — nav sidebar */ --neutral-layer-1: #F5F6FA; --neutral-layer-2: #F0F1F8; --neutral-layer-card-rest: #ffffff; --neutral-fill-rest: #F0F1F8; --neutral-fill-hover: #E8E9F5; --neutral-fill-stealth-hover: rgba(108,99,255,.08); --neutral-fill-stealth-active: rgba(108,99,255,.14); --neutral-foreground-rest: #1B2559; --neutral-foreground-hint: #9396A5; --neutral-stroke-rest: #E9EBF0; --neutral-layer-floating: #ffffff; /* FluentUI accent passthrough */ --accent-fill-rest: #6C63FF; --accent-fill-hover: #5A52E0; --accent-fill-active: #4C3DBF; --accent-foreground-rest: #6C63FF; --theme-fluent-accent: #6C63FF; --theme-mode: light; } /* ═══════════════════════════════════════════════════════════════════════════ 2. COSMIC DARK ✦ Deep-space navy, neon cyan accent ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="cosmic"] { --sat-primary: #00D4FF; --sat-primary-light: rgba(0,212,255,.14); --sat-primary-dark: #0099BB; --sat-primary-rgb: 0,212,255; --sat-bg: #080D1A; --sat-surface: #0F1829; --sat-surface-2: #162035; --sat-border: #1C2A42; --sat-border-input: #243350; --sat-text: #DCE8FF; --sat-text-sub: #8BA4CC; --sat-text-muted: #4E6A8C; --sat-shadow: 0 4px 28px rgba(0,0,0,.55); --sat-shadow-modal: 0 20px 60px rgba(0,0,0,.75); /* Status bg overrides for dark surfaces */ --sat-green-bg: rgba(11,140,74,.18); --sat-red-bg: rgba(192,57,43,.18); --sat-amber-bg: rgba(183,121,31,.18); --sat-blue-bg: rgba(26,86,219,.18); --sat-orange-bg: rgba(249,115,22,.18); --theme-fluent-accent: #00D4FF; --theme-mode: dark; --logo-filter: brightness(0) invert(1); --neutral-layer-1: #0F1829; --neutral-layer-2: #162035; --neutral-layer-card-rest: #0F1829; --neutral-fill-rest: #162035; --neutral-fill-hover: #1C2C48; --neutral-fill-stealth-hover: rgba(0,212,255,.10); --neutral-fill-stealth-active: rgba(0,212,255,.18); --neutral-foreground-rest: #DCE8FF; --neutral-foreground-hint: #4E6A8C; --neutral-stroke-rest: #1C2A42; --neutral-layer-floating: #0F1829; --accent-fill-rest: #00D4FF; --accent-fill-hover: #33DCFF; --accent-fill-active: #00AACC; --accent-foreground-rest: #00D4FF; } [data-theme="cosmic"] .sat-table tbody tr:hover td { background: #192840; } [data-theme="cosmic"] body, [data-theme="cosmic"] article, [data-theme="cosmic"] .sat-page { background: var(--sat-bg); color: var(--sat-text); } /* ═══════════════════════════════════════════════════════════════════════════ 3. AURORA ✦ Northern-lights dark, neon green accent ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="aurora"] { --sat-primary: #00E5A0; --sat-primary-light: rgba(0,229,160,.15); --sat-primary-dark: #00A373; --sat-primary-rgb: 0,229,160; --sat-bg: #070E1B; --sat-surface: #0D1A2D; --sat-surface-2: #122336; --sat-border: #183048; --sat-border-input: #1F3C5A; --sat-text: #D4F5E9; --sat-text-sub: #7AB8A0; --sat-text-muted: #3E7060; --sat-shadow: 0 4px 28px rgba(0,0,0,.55); --sat-shadow-modal: 0 20px 60px rgba(0,0,0,.75); --sat-green-bg: rgba(0,229,160,.15); --sat-red-bg: rgba(192,57,43,.18); --sat-amber-bg: rgba(183,121,31,.18); --sat-blue-bg: rgba(0,212,255,.15); --sat-orange-bg: rgba(249,115,22,.18); --theme-fluent-accent: #00E5A0; --theme-mode: dark; --logo-filter: brightness(0) invert(1); --neutral-layer-1: #0D1A2D; --neutral-layer-2: #122336; --neutral-layer-card-rest: #0D1A2D; --neutral-fill-rest: #122336; --neutral-fill-hover: #183044; --neutral-fill-stealth-hover: rgba(0,229,160,.10); --neutral-fill-stealth-active: rgba(0,229,160,.18); --neutral-foreground-rest: #D4F5E9; --neutral-foreground-hint: #3E7060; --neutral-stroke-rest: #183048; --neutral-layer-floating: #0D1A2D; --accent-fill-rest: #00E5A0; --accent-fill-hover: #33EBAF; --accent-fill-active: #00B880; --accent-foreground-rest: #00E5A0; } [data-theme="aurora"] .sat-table tbody tr:hover td { background: #162B3F; } [data-theme="aurora"] body, [data-theme="aurora"] article, [data-theme="aurora"] .sat-page { background: var(--sat-bg); color: var(--sat-text); } /* ═══════════════════════════════════════════════════════════════════════════ 4. NEON CITY ✦ Cyberpunk dark, electric pink accent ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="neon"] { --sat-primary: #FF2D9A; --sat-primary-light: rgba(255,45,154,.15); --sat-primary-dark: #C01070; --sat-primary-rgb: 255,45,154; --sat-bg: #0A0012; --sat-surface: #12001E; --sat-surface-2: #1A0028; --sat-border: #25003A; --sat-border-input: #320050; --sat-text: #F5D0FF; --sat-text-sub: #C080E0; --sat-text-muted: #7040A0; --sat-shadow: 0 4px 28px rgba(0,0,0,.65); --sat-shadow-modal: 0 20px 60px rgba(0,0,0,.85); --sat-green-bg: rgba(0,229,160,.15); --sat-red-bg: rgba(255,45,154,.18); --sat-amber-bg: rgba(255,170,0,.18); --sat-blue-bg: rgba(120,80,255,.18); --sat-orange-bg: rgba(255,100,30,.18); --theme-fluent-accent: #FF2D9A; --theme-mode: dark; --logo-filter: brightness(0) invert(1); --neutral-layer-1: #12001E; --neutral-layer-2: #1A0028; --neutral-layer-card-rest: #12001E; --neutral-fill-rest: #1A0028; --neutral-fill-hover: #220038; --neutral-fill-stealth-hover: rgba(255,45,154,.10); --neutral-fill-stealth-active: rgba(255,45,154,.18); --neutral-foreground-rest: #F5D0FF; --neutral-foreground-hint: #7040A0; --neutral-stroke-rest: #25003A; --neutral-layer-floating: #12001E; --accent-fill-rest: #FF2D9A; --accent-fill-hover: #FF5AB1; --accent-fill-active: #CC2080; --accent-foreground-rest: #FF2D9A; } [data-theme="neon"] .sat-table tbody tr:hover td { background: #200030; } [data-theme="neon"] body, [data-theme="neon"] article, [data-theme="neon"] .sat-page { background: var(--sat-bg); color: var(--sat-text); } /* ═══════════════════════════════════════════════════════════════════════════ 5. SOLAR GOLD ✦ Warm academic prestige, amber accent ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="solar"] { --sat-primary: #D97706; --sat-primary-light: #FEF3C7; --sat-primary-dark: #92400E; --sat-primary-rgb: 217,119,6; --sat-bg: #FFFBF0; --sat-surface: #FFFFFF; --sat-surface-2: #FFFAEB; --sat-border: #F5E6C0; --sat-border-input: #EDD99A; --sat-text: #1C1100; --sat-text-sub: #4A3800; --sat-text-muted: #A07C30; --sat-shadow: 0 4px 24px rgba(180,120,0,.08); --sat-shadow-modal: 0 20px 60px rgba(180,120,0,.18); --theme-fluent-accent: #D97706; --theme-mode: light; --neutral-layer-1: #FFFBF0; --neutral-layer-2: #FFF8E0; --neutral-layer-card-rest: #FFFFFF; --neutral-fill-rest: #FFF8E0; --neutral-fill-hover: #FEF3C7; --neutral-fill-stealth-hover: rgba(217,119,6,.08); --neutral-fill-stealth-active: rgba(217,119,6,.15); --neutral-foreground-rest: #1C1100; --neutral-foreground-hint: #A07C30; --neutral-stroke-rest: #F5E6C0; --neutral-layer-floating: #FFFFFF; --accent-fill-rest: #D97706; --accent-fill-hover: #B45309; --accent-fill-active: #92400E; --accent-foreground-rest: #D97706; } [data-theme="solar"] .sat-table tbody tr:hover td { background: #FFFAEB; } /* ═══════════════════════════════════════════════════════════════════════════ 6. OCEAN DEEP ✦ Deep teal dark, bright cyan accent ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="ocean"] { --sat-primary: #06B6D4; --sat-primary-light: rgba(6,182,212,.15); --sat-primary-dark: #0E7490; --sat-primary-rgb: 6,182,212; --sat-bg: #071520; --sat-surface: #0C2030; --sat-surface-2: #112B3E; --sat-border: #163750; --sat-border-input: #1D4464; --sat-text: #CCEEFF; --sat-text-sub: #7AB5CC; --sat-text-muted: #3A7090; --sat-shadow: 0 4px 28px rgba(0,0,0,.55); --sat-shadow-modal: 0 20px 60px rgba(0,0,0,.75); --sat-green-bg: rgba(6,182,212,.15); --sat-red-bg: rgba(192,57,43,.18); --sat-amber-bg: rgba(183,121,31,.18); --sat-blue-bg: rgba(6,182,212,.18); --sat-orange-bg: rgba(249,115,22,.18); --theme-fluent-accent: #06B6D4; --theme-mode: dark; --logo-filter: brightness(0) invert(1); --neutral-layer-1: #0C2030; --neutral-layer-2: #112B3E; --neutral-layer-card-rest: #0C2030; --neutral-fill-rest: #112B3E; --neutral-fill-hover: #163650; --neutral-fill-stealth-hover: rgba(6,182,212,.10); --neutral-fill-stealth-active: rgba(6,182,212,.18); --neutral-foreground-rest: #CCEEFF; --neutral-foreground-hint: #3A7090; --neutral-stroke-rest: #163750; --neutral-layer-floating: #0C2030; --accent-fill-rest: #06B6D4; --accent-fill-hover: #38C4E0; --accent-fill-active: #0494AE; --accent-foreground-rest: #06B6D4; } [data-theme="ocean"] .sat-table tbody tr:hover td { background: #133248; } [data-theme="ocean"] body, [data-theme="ocean"] article, [data-theme="ocean"] .sat-page { background: var(--sat-bg); color: var(--sat-text); } /* ═══════════════════════════════════════════════════════════════════════════ 7. CLEAN SLATE ✦ Minimal modern, steel-blue accent ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="slate"] { --sat-primary: #3B82F6; --sat-primary-light: #EFF6FF; --sat-primary-dark: #1D4ED8; --sat-primary-rgb: 59,130,246; --sat-bg: #F8FAFC; --sat-surface: #FFFFFF; --sat-surface-2: #F1F5F9; --sat-border: #E2E8F0; --sat-border-input: #CBD5E1; --sat-text: #0F172A; --sat-text-sub: #334155; --sat-text-muted: #94A3B8; --sat-shadow: 0 4px 24px rgba(0,0,0,.06); --sat-shadow-modal: 0 20px 60px rgba(0,0,0,.18); --theme-fluent-accent: #3B82F6; --theme-mode: light; --neutral-layer-1: #F8FAFC; --neutral-layer-2: #F1F5F9; --neutral-layer-card-rest: #FFFFFF; --neutral-fill-rest: #F1F5F9; --neutral-fill-hover: #E2E8F0; --neutral-fill-stealth-hover: rgba(59,130,246,.08); --neutral-fill-stealth-active: rgba(59,130,246,.15); --neutral-foreground-rest: #0F172A; --neutral-foreground-hint: #94A3B8; --neutral-stroke-rest: #E2E8F0; --neutral-layer-floating: #FFFFFF; --accent-fill-rest: #3B82F6; --accent-fill-hover: #2563EB; --accent-fill-active: #1D4ED8; --accent-foreground-rest: #3B82F6; } [data-theme="slate"] .sat-table tbody tr:hover td { background: #F1F5F9; } /* ═══════════════════════════════════════════════════════════════════════════ 8. SAKURA ✦ Soft welcoming rose, warm light ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="sakura"] { --sat-primary: #E91E63; --sat-primary-light: #FFF0F3; --sat-primary-dark: #C2185B; --sat-primary-rgb: 233,30,99; --sat-bg: #FFF5F8; --sat-surface: #FFFFFF; --sat-surface-2: #FFF0F3; --sat-border: #FDDDE6; --sat-border-input: #F9B8CC; --sat-text: #1A0A10; --sat-text-sub: #4A1828; --sat-text-muted: #B06080; --sat-shadow: 0 4px 24px rgba(233,30,99,.07); --sat-shadow-modal: 0 20px 60px rgba(233,30,99,.15); --theme-fluent-accent: #E91E63; --theme-mode: light; --neutral-layer-1: #FFF5F8; --neutral-layer-2: #FFF0F3; --neutral-layer-card-rest: #FFFFFF; --neutral-fill-rest: #FFF0F3; --neutral-fill-hover: #FDDDE6; --neutral-fill-stealth-hover: rgba(233,30,99,.08); --neutral-fill-stealth-active: rgba(233,30,99,.15); --neutral-foreground-rest: #1A0A10; --neutral-foreground-hint: #B06080; --neutral-stroke-rest: #FDDDE6; --neutral-layer-floating: #FFFFFF; --accent-fill-rest: #E91E63; --accent-fill-hover: #C2185B; --accent-fill-active: #AD1457; --accent-foreground-rest: #E91E63; } [data-theme="sakura"] .sat-table tbody tr:hover td { background: #FFF0F3; } /* ═══════════════════════════════════════════════════════════════════════════ DARK-THEME GLOBAL HELPERS Applied to all four dark themes in one selector block. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="cosmic"], [data-theme="aurora"], [data-theme="neon"], [data-theme="ocean"] { color-scheme: dark; } /* Cards and modals in dark mode */ [data-theme="cosmic"] .sat-card, [data-theme="aurora"] .sat-card, [data-theme="neon"] .sat-card, [data-theme="ocean"] .sat-card { background: var(--sat-surface); border: 1px solid var(--sat-border); } /* Input fields */ [data-theme="cosmic"] .sat-input, [data-theme="aurora"] .sat-input, [data-theme="neon"] .sat-input, [data-theme="ocean"] .sat-input { background: var(--sat-surface); color: var(--sat-text); border-color: var(--sat-border-input); } /* Dropdown list */ [data-theme="cosmic"] .sat-dropdown-list, [data-theme="aurora"] .sat-dropdown-list, [data-theme="neon"] .sat-dropdown-list, [data-theme="ocean"] .sat-dropdown-list { background: var(--sat-surface); border-color: var(--sat-border); } [data-theme="cosmic"] .sat-dropdown-item:hover, [data-theme="aurora"] .sat-dropdown-item:hover, [data-theme="neon"] .sat-dropdown-item:hover, [data-theme="ocean"] .sat-dropdown-item:hover { background: var(--sat-surface-2); } /* Table header */ [data-theme="cosmic"] .sat-table th, [data-theme="aurora"] .sat-table th, [data-theme="neon"] .sat-table th, [data-theme="ocean"] .sat-table th { background: var(--sat-surface-2); } /* Modal */ [data-theme="cosmic"] .sat-modal, [data-theme="aurora"] .sat-modal, [data-theme="neon"] .sat-modal, [data-theme="ocean"] .sat-modal { background: var(--sat-surface); } [data-theme="cosmic"] .sat-overlay, [data-theme="aurora"] .sat-overlay, [data-theme="neon"] .sat-overlay, [data-theme="ocean"] .sat-overlay { background: rgba(0,0,0,.65); } /* ═══════════════════════════════════════════════════════════════════════════ DARK THEME — FUTURISTIC GLOW EFFECTS (opt-in via .sat-glow class) ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="cosmic"] .sat-btn-primary, [data-theme="aurora"] .sat-btn-primary, [data-theme="neon"] .sat-btn-primary, [data-theme="ocean"] .sat-btn-primary { box-shadow: 0 0 12px rgba(var(--sat-primary-rgb), .4); } [data-theme="cosmic"] .sat-btn-primary:hover, [data-theme="aurora"] .sat-btn-primary:hover, [data-theme="neon"] .sat-btn-primary:hover, [data-theme="ocean"] .sat-btn-primary:hover { box-shadow: 0 0 22px rgba(var(--sat-primary-rgb), .65); } [data-theme="cosmic"] .sat-stat-icon-primary, [data-theme="aurora"] .sat-stat-icon-primary, [data-theme="neon"] .sat-stat-icon-primary, [data-theme="ocean"] .sat-stat-icon-primary { box-shadow: 0 0 14px rgba(var(--sat-primary-rgb), .35); } /* ═══════════════════════════════════════════════════════════════════════════ NAV SIDEBAR — Override FluentUI design tokens DIRECTLY on the elements that have inline styles set by FluentUI's token system. Key insight: FluentUI sets --neutral-layer-* as inline styles on each web component element. A stylesheet !important rule beats a non-!important inline style on the same element. We use var(--sat-*) which FluentUI never touches, so they always resolve to the correct theme value. ═══════════════════════════════════════════════════════════════════════════ */ /* Override the token value that drives fluent-nav-menu's shadow DOM background */ html[data-theme] fluent-nav-menu { --neutral-layer-1: var(--sat-surface) !important; --neutral-layer-2: var(--sat-surface-2) !important; --neutral-layer-3: var(--sat-surface-2) !important; --neutral-layer-4: var(--sat-surface-2) !important; --neutral-fill-rest: var(--sat-surface-2) !important; --neutral-fill-hover: var(--sat-surface-2) !important; /* fluent-nav-item .positioning-region uses --neutral-fill-stealth-rest for its bg */ --neutral-fill-stealth-rest: transparent !important; --neutral-fill-stealth-hover: rgba(var(--sat-primary-rgb, 108,99,255), .10) !important; --neutral-fill-stealth-active: rgba(var(--sat-primary-rgb, 108,99,255), .16) !important; --neutral-foreground-rest: var(--sat-text) !important; --neutral-foreground-hint: var(--sat-text-muted) !important; --neutral-stroke-rest: var(--sat-border) !important; --accent-fill-rest: var(--sat-primary) !important; background: var(--sat-surface) !important; } /* Override header background */ html[data-theme] fluent-header, html[data-theme] .siteheader { --neutral-layer-1: var(--sat-surface) !important; --neutral-layer-4: var(--sat-surface) !important; background: var(--sat-surface) !important; border-bottom: 1px solid var(--sat-border) !important; color: var(--sat-text) !important; } /* Nav container fallback */ html[data-theme] nav.sitenav { background: var(--sat-surface) !important; color: var(--sat-text) !important; border-right: 1px solid var(--sat-border) !important; } /* fluent-nav-group also gets its own token set by FluentUI */ html[data-theme] fluent-nav-group { --neutral-layer-1: var(--sat-surface) !important; --neutral-fill-rest: var(--sat-surface-2) !important; --neutral-fill-hover: var(--sat-surface-2) !important; --neutral-fill-stealth-rest: transparent !important; --neutral-fill-stealth-hover: rgba(var(--sat-primary-rgb, 108,99,255), .10) !important; --neutral-fill-stealth-active: rgba(var(--sat-primary-rgb, 108,99,255), .16) !important; --neutral-foreground-rest: var(--sat-text) !important; --accent-fill-rest: var(--sat-primary) !important; } /* fluent-anchor (nav links) */ html[data-theme] nav fluent-anchor { --neutral-layer-1: var(--sat-surface) !important; --neutral-fill-stealth-rest: transparent !important; --neutral-fill-stealth-hover: rgba(var(--sat-primary-rgb, 108,99,255), .10) !important; --neutral-fill-stealth-active: rgba(var(--sat-primary-rgb, 108,99,255), .16) !important; --neutral-foreground-rest: var(--sat-text-sub) !important; --accent-fill-rest: var(--sat-primary) !important; } /* Nav item text — cover both possible render shapes */ [data-theme] .fluent-nav-link .fluent-nav-text, [data-theme] fluent-nav-link::part(content), [data-theme] nav fluent-anchor::part(control) { color: var(--sat-text-sub) !important; background: transparent !important; } /* Nav item hover */ [data-theme] fluent-nav-link:hover::part(content), [data-theme] nav fluent-anchor:hover::part(control) { background: var(--sat-surface-2) !important; color: var(--sat-text) !important; } /* Active nav item — highlighted with accent */ [data-theme] fluent-nav-link.active::part(content), [data-theme] fluent-nav-link[aria-current]::part(content), [data-theme] nav fluent-anchor.active::part(control), [data-theme] nav fluent-anchor[aria-current]::part(control) { background: var(--sat-primary-light, rgba(108,99,255,.12)) !important; color: var(--sat-primary) !important; font-weight: 700 !important; border-left: 3px solid var(--sat-primary) !important; } /* Nav group title text */ [data-theme] fluent-nav-group::part(title) { color: var(--sat-text-sub) !important; } /* Nav group expand icon */ [data-theme] fluent-nav-group::part(expand-collapse-button) { color: var(--sat-text-muted) !important; } /* Theme bar at bottom of sidebar */ [data-theme] .nav-theme-bar { background: var(--sat-surface); border-top: 1px solid var(--sat-border); color: var(--sat-text-muted); } /* Scrollbar in dark themes */ [data-theme="cosmic"] nav.sitenav::-webkit-scrollbar-track, [data-theme="aurora"] nav.sitenav::-webkit-scrollbar-track, [data-theme="neon"] nav.sitenav::-webkit-scrollbar-track, [data-theme="ocean"] nav.sitenav::-webkit-scrollbar-track { background: var(--sat-surface); } [data-theme="cosmic"] nav.sitenav::-webkit-scrollbar-thumb, [data-theme="aurora"] nav.sitenav::-webkit-scrollbar-thumb, [data-theme="neon"] nav.sitenav::-webkit-scrollbar-thumb, [data-theme="ocean"] nav.sitenav::-webkit-scrollbar-thumb { background: var(--sat-border); border-radius: 4px; } /* siteheader — forced with !important to beat site.css which also uses !important */ html[data-theme] .siteheader { background-color: var(--sat-surface) !important; border-bottom: 1px solid var(--sat-border) !important; color: var(--sat-text) !important; } /* ═══════════════════════════════════════════════════════════════════════════ FORCE FluentUI design tokens on with !important. FluentUI's loading-theme.js injects these as non-!important inline styles on . A stylesheet !important rule beats a non-!important inline style, so putting these here ensures our theme always wins. ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="classic"] body { --neutral-layer-1: #F5F6FA !important; --neutral-layer-2: #F0F1F8 !important; --neutral-layer-3: #ECEDF5 !important; --neutral-layer-4: #E8E9F2 !important; --neutral-layer-card-rest: #ffffff !important; --neutral-layer-floating: #ffffff !important; --neutral-foreground-rest: #1B2559 !important; --neutral-foreground-hint: #9396A5 !important; --neutral-fill-rest: #F0F1F8 !important; --neutral-fill-hover: #E8E9F5 !important; --neutral-stroke-rest: #E9EBF0 !important; --accent-fill-rest: #6C63FF !important; --accent-fill-hover: #5A52E0 !important; --accent-fill-active: #4C3DBF !important; --accent-foreground-rest: #ffffff !important; } html[data-theme="cosmic"] body { --neutral-layer-1: #080D1A !important; --neutral-layer-2: #0F1829 !important; --neutral-layer-3: #162035 !important; --neutral-layer-4: #1C2A42 !important; --neutral-layer-card-rest: #0F1829 !important; --neutral-layer-floating: #0F1829 !important; --neutral-foreground-rest: #DCE8FF !important; --neutral-foreground-hint: #4E6A8C !important; --neutral-fill-rest: #162035 !important; --neutral-fill-hover: #1C2C48 !important; --neutral-stroke-rest: #1C2A42 !important; --accent-fill-rest: #00D4FF !important; --accent-fill-hover: #33DCFF !important; --accent-fill-active: #00AACC !important; --accent-foreground-rest: #000000 !important; } html[data-theme="aurora"] body { --neutral-layer-1: #070E1B !important; --neutral-layer-2: #0D1A2D !important; --neutral-layer-3: #122336 !important; --neutral-layer-4: #183048 !important; --neutral-layer-card-rest: #0D1A2D !important; --neutral-layer-floating: #0D1A2D !important; --neutral-foreground-rest: #D4F5E9 !important; --neutral-foreground-hint: #3E7060 !important; --neutral-fill-rest: #122336 !important; --neutral-fill-hover: #183044 !important; --neutral-stroke-rest: #183048 !important; --accent-fill-rest: #00E5A0 !important; --accent-fill-hover: #33EBAF !important; --accent-fill-active: #00B880 !important; --accent-foreground-rest: #000000 !important; } html[data-theme="neon"] body { --neutral-layer-1: #0A0012 !important; --neutral-layer-2: #12001E !important; --neutral-layer-3: #1A0028 !important; --neutral-layer-4: #25003A !important; --neutral-layer-card-rest: #12001E !important; --neutral-layer-floating: #12001E !important; --neutral-foreground-rest: #F5D0FF !important; --neutral-foreground-hint: #7040A0 !important; --neutral-fill-rest: #1A0028 !important; --neutral-fill-hover: #220038 !important; --neutral-stroke-rest: #25003A !important; --accent-fill-rest: #FF2D9A !important; --accent-fill-hover: #FF5AB1 !important; --accent-fill-active: #CC2080 !important; --accent-foreground-rest: #ffffff !important; } html[data-theme="solar"] body { --neutral-layer-1: #FFFBF0 !important; --neutral-layer-2: #FFF8E0 !important; --neutral-layer-3: #FEF3C7 !important; --neutral-layer-4: #FEF0B0 !important; --neutral-layer-card-rest: #FFFFFF !important; --neutral-layer-floating: #FFFFFF !important; --neutral-foreground-rest: #1C1100 !important; --neutral-foreground-hint: #A07C30 !important; --neutral-fill-rest: #FFF8E0 !important; --neutral-fill-hover: #FEF3C7 !important; --neutral-stroke-rest: #F5E6C0 !important; --accent-fill-rest: #D97706 !important; --accent-fill-hover: #B45309 !important; --accent-fill-active: #92400E !important; --accent-foreground-rest: #ffffff !important; } html[data-theme="ocean"] body { --neutral-layer-1: #071520 !important; --neutral-layer-2: #0C2030 !important; --neutral-layer-3: #112B3E !important; --neutral-layer-4: #163750 !important; --neutral-layer-card-rest: #0C2030 !important; --neutral-layer-floating: #0C2030 !important; --neutral-foreground-rest: #CCEEFF !important; --neutral-foreground-hint: #3A7090 !important; --neutral-fill-rest: #112B3E !important; --neutral-fill-hover: #163650 !important; --neutral-stroke-rest: #163750 !important; --accent-fill-rest: #06B6D4 !important; --accent-fill-hover: #38C4E0 !important; --accent-fill-active: #0494AE !important; --accent-foreground-rest: #000000 !important; } html[data-theme="slate"] body { --neutral-layer-1: #F8FAFC !important; --neutral-layer-2: #F1F5F9 !important; --neutral-layer-3: #E8EEF4 !important; --neutral-layer-4: #E2E8F0 !important; --neutral-layer-card-rest: #FFFFFF !important; --neutral-layer-floating: #FFFFFF !important; --neutral-foreground-rest: #0F172A !important; --neutral-foreground-hint: #94A3B8 !important; --neutral-fill-rest: #F1F5F9 !important; --neutral-fill-hover: #E2E8F0 !important; --neutral-stroke-rest: #E2E8F0 !important; --accent-fill-rest: #3B82F6 !important; --accent-fill-hover: #2563EB !important; --accent-fill-active: #1D4ED8 !important; --accent-foreground-rest: #ffffff !important; } html[data-theme="sakura"] body { --neutral-layer-1: #FFF5F8 !important; --neutral-layer-2: #FFF0F3 !important; --neutral-layer-3: #FDDDE6 !important; --neutral-layer-4: #FBD0DC !important; --neutral-layer-card-rest: #FFFFFF !important; --neutral-layer-floating: #FFFFFF !important; --neutral-foreground-rest: #1A0A10 !important; --neutral-foreground-hint: #B06080 !important; --neutral-fill-rest: #FFF0F3 !important; --neutral-fill-hover: #FDDDE6 !important; --neutral-stroke-rest: #FDDDE6 !important; --accent-fill-rest: #E91E63 !important; --accent-fill-hover: #C2185B !important; --accent-fill-active: #AD1457 !important; --accent-foreground-rest: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════════ HARD OVERRIDE — nav sidebar and header backgrounds These use !important to beat any conflicting rules. ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme] body .navmenu, html[data-theme] body nav.sitenav { background-color: var(--sat-surface) !important; } html[data-theme] body fluent-nav-menu { background-color: var(--sat-surface) !important; } /* Active nav item — solid accent pill */ html[data-theme] body fluent-anchor.active::part(control), html[data-theme] body fluent-anchor[aria-current]::part(control) { background: var(--sat-primary-light) !important; color: var(--sat-primary) !important; font-weight: 700 !important; border-left: 3px solid var(--sat-primary) !important; border-radius: 0 6px 6px 0 !important; } /* Hover state for nav items */ html[data-theme] body fluent-anchor:not([aria-current]):not(.active):hover::part(control) { background: var(--sat-surface-2) !important; color: var(--sat-text) !important; } /* Nav group title / expand button */ html[data-theme] body fluent-tree-item::part(expand-collapse-button), html[data-theme] body fluent-nav-group::part(expand-collapse-button) { color: var(--sat-text-muted) !important; } /* Nav text color */ html[data-theme] body fluent-anchor::part(control) { color: var(--sat-text-sub) !important; }