/* Catppuccin (https://catppuccin.com) — MIT licensed, see /NOTICES. Hex values sourced verbatim from catppuccin/palette's palette.json — never hand-retyped from documentation images (design D56). Two attributes are set together on by theme.js (design D58): data-theme — latte/frappe/macchiato/mocha (Catppuccin) or ap-light/ap-dark (Cloud IT Manager brand, design D63) data-bs-theme — "light" or "dark", so Bootstrap 5.3's OWN dark-mode variable set activates for every component (card, modal, table, alert, dropdown, form-control) without hand-overriding each Bootstrap class individually — a better mechanism than task 3.1 originally assumed, since Bootstrap 5.3 (already vendored here) ships native --bs-* custom properties for exactly this. Our --color-* semantic variables remain the contract new/updated AuditPath styles should use directly; the --bs-* overrides below are what make Bootstrap's own unmodified classes follow the same palette. */ :root { --color-surface: #eff1f5; --color-surface-raised: #ffffff; --color-text: #4c4f69; --color-text-muted: #6c6f85; --color-border: #ccd0da; --color-accent: #1e66f5; --color-accent-contrast: #ffffff; --color-danger: #d20f39; --color-warning: #df8e1d; --color-success: #40a02b; /* Sidebar chrome (design D61) — sourced from crust/surface0/subtext0/ text so the sidebar reads as "this theme's navigation chrome", not a fixed brand element independent of the active theme. */ --color-sidebar-bg: #dce0e8; --color-sidebar-text: #6c6f85; --color-sidebar-active-bg: #ccd0da; --color-sidebar-active-text: #4c4f69; } /* First-visit fallback (design D58) — applies only while no data-theme attribute has been set yet, i.e. before theme.js's synchronous read in App.razor's ever runs with a stored preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-surface: #1e1e2e; --color-surface-raised: #313244; --color-text: #cdd6f4; --color-text-muted: #a6adc8; --color-border: #45475a; --color-accent: #89b4fa; --color-accent-contrast: #1e1e2e; --color-danger: #f38ba8; --color-warning: #f9e2af; --color-success: #a6e3a1; --color-sidebar-bg: #11111b; --color-sidebar-text: #a6adc8; --color-sidebar-active-bg: #313244; --color-sidebar-active-text: #cdd6f4; } } [data-theme="latte"] { --color-surface: #eff1f5; --color-surface-raised: #ffffff; --color-text: #4c4f69; --color-text-muted: #6c6f85; --color-border: #ccd0da; --color-accent: #1e66f5; --color-accent-contrast: #ffffff; --color-danger: #d20f39; --color-warning: #df8e1d; --color-success: #40a02b; --color-sidebar-bg: #dce0e8; --color-sidebar-text: #6c6f85; --color-sidebar-active-bg: #ccd0da; --color-sidebar-active-text: #4c4f69; } [data-theme="frappe"] { --color-surface: #303446; --color-surface-raised: #414559; --color-text: #c6d0f5; --color-text-muted: #a5adce; --color-border: #51576d; --color-accent: #8caaee; --color-accent-contrast: #232634; --color-danger: #e78284; --color-warning: #e5c890; --color-success: #a6d189; --color-sidebar-bg: #232634; --color-sidebar-text: #a5adce; --color-sidebar-active-bg: #414559; --color-sidebar-active-text: #c6d0f5; } [data-theme="macchiato"] { --color-surface: #24273a; --color-surface-raised: #363a4f; --color-text: #cad3f5; --color-text-muted: #a5adcb; --color-border: #494d64; --color-accent: #8aadf4; --color-accent-contrast: #181926; --color-danger: #ed8796; --color-warning: #eed49f; --color-success: #a6da95; --color-sidebar-bg: #181926; --color-sidebar-text: #a5adcb; --color-sidebar-active-bg: #363a4f; --color-sidebar-active-text: #cad3f5; } [data-theme="mocha"] { --color-surface: #1e1e2e; --color-surface-raised: #313244; --color-text: #cdd6f4; --color-text-muted: #a6adc8; --color-border: #45475a; --color-accent: #89b4fa; --color-accent-contrast: #1e1e2e; --color-danger: #f38ba8; --color-warning: #f9e2af; --color-success: #a6e3a1; --color-sidebar-bg: #11111b; --color-sidebar-text: #a6adc8; --color-sidebar-active-bg: #313244; --color-sidebar-active-text: #cdd6f4; } /* AP Light / AP Dark (design D63) — sourced from Cloud IT Manager's own site tokens (citm-astro-site/src/styles/tokens.css: --bg/--surface/ --heading/--body/--link/--border/--action/--action-label), NOT Catppuccin. Sidebar variables reuse that same site's .band-feature component (global.css) — "a high-contrast panel that pops in both modes: light page -> dark plum band, dark page -> aubergine band" — a real, already-shipped design decision for exactly the "chrome distinct from the page body" role the sidebar plays here. danger/warning/success are NOT from CITM's tokens (the site has none - it's marketing content with no need for app status colours); chosen to harmonise with the aubergine/gold/plum family, not lifted from anywhere. */ [data-theme="ap-light"] { --color-surface: #f6f2f8; --color-surface-raised: #ffffff; --color-text: #311e48; --color-text-muted: #415373; --color-border: #e3dcec; --color-accent: #d99e22; --color-accent-contrast: #0a0e1f; --color-danger: #b3261e; --color-warning: #c97c1f; --color-success: #3f7d58; --color-sidebar-bg: #1b1230; --color-sidebar-text: #95a5c3; --color-sidebar-active-bg: #2a1f40; --color-sidebar-active-text: #ffffff; } [data-theme="ap-dark"] { --color-surface: #1b1230; --color-surface-raised: #2a1f40; --color-text: #efe6f2; --color-text-muted: #95a5c3; --color-border: #3a2e52; --color-accent: #d99e22; --color-accent-contrast: #0a0e1f; --color-danger: #e06657; --color-warning: #e0a040; --color-success: #5fae7c; --color-sidebar-bg: #3b2a54; --color-sidebar-text: #cdbee6; --color-sidebar-active-bg: #4a3a63; --color-sidebar-active-text: #ffffff; } /* Bootstrap 5.3 native dark-mode variables (design D56 refinement) — once [data-bs-theme="dark"] is set, Bootstrap's OWN --bs-body-bg/--bs-body-color/ --bs-card-bg/--bs-border-color etc. already switch to sane dark defaults; these overrides replace Bootstrap's generic dark palette with the exact active Catppuccin flavour, for every [data-theme] value at once. */ [data-theme] { --bs-body-bg: var(--color-surface); --bs-body-color: var(--color-text); --bs-border-color: var(--color-border); --bs-secondary-color: var(--color-text-muted); --bs-card-bg: var(--color-surface-raised); --bs-card-border-color: var(--color-border); --bs-tertiary-bg: var(--color-surface-raised); --bs-primary: var(--color-accent); --bs-link-color: var(--color-accent); --bs-link-hover-color: var(--color-accent); --bs-danger: var(--color-danger); --bs-warning: var(--color-warning); --bs-success: var(--color-success); } /* --bs-primary-rgb feeds Bootstrap's rgba(var(--bs-primary-rgb), alpha) utilities (focus rings, outline-button hovers) — it needs a literal "R, G, B" triplet, not a hex string, so it can't be derived from var(--color-accent) above; set per theme explicitly instead. */ [data-theme="latte"] { --bs-primary-rgb: 30, 102, 245; } [data-theme="frappe"] { --bs-primary-rgb: 140, 170, 238; } [data-theme="macchiato"] { --bs-primary-rgb: 138, 173, 244; } [data-theme="mocha"] { --bs-primary-rgb: 137, 180, 250; } /* CITM's --action gold (#D99E22) is a fixed primitive in tokens.css - same value in both AP Light and AP Dark, unlike the Catppuccin flavours above. */ [data-theme="ap-light"], [data-theme="ap-dark"] { --bs-primary-rgb: 217, 158, 34; }