/* Study-surface themes. `data-theme` on selects a palette (default midnight).
These style the AI Engineering Programme's dark canvas (.aca) and nothing else.
The GLOBAL CHROME — topbar, footer, brand mark — is fixed Prism, defined once
in styles.css. A reader choosing a comfortable study surface should not be able
to re-brand the application; that was previously the case, and it meant the
product had four different identities depending on a per-user preference.
--th-* : the programme's dark content surface (.aca)
--page-bg: the dark page canvas behind it (body.prog-dark)
*/
:root, :root[data-theme="midnight"]{
--page-bg:#070C16;
--th-acc:#5AA9E6; --th-acc-ink:#8FC7F2; --th-on-acc:#06182B; --th-acc-rgb:90,169,230;
--th-gold:#C8A24A; --th-gold-rgb:200,162,74; --th-ink:#EAF1FB; --th-tx:#B7C6DC; --th-mut:#7C90AC; --th-faint:#5A6E8C;
--th-line:#22375A; --th-sf:#122540; --th-sf2:#16294A; --th-live:#3FC98C; --th-border:#1B2C4A;
--th-disp:"Iowan Old Style",Georgia,"Times New Roman",ui-serif,serif;
--th-aca-bg:radial-gradient(120% 90% at 12% -6%,#0f2444 0%,#0A1526 55%);
}
:root[data-theme="onyx"]{
--page-bg:#060708;
--th-acc:#E8B84B; --th-acc-ink:#F0CE7C; --th-on-acc:#1A1405; --th-acc-rgb:232,184,75;
--th-gold:#E8B84B; --th-gold-rgb:232,184,75; --th-ink:#F5F6F7; --th-tx:#C0C5CC; --th-mut:#868D97; --th-faint:#5C636D;
--th-line:#2A2E35; --th-sf:#191B1F; --th-sf2:#1F2227; --th-live:#5AD08A; --th-border:#23262C;
--th-disp:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--th-aca-bg:linear-gradient(180deg,#0C0D10,#08090B);
}
:root[data-theme="emerald"]{
--page-bg:#061912;
--th-acc:#DCC079; --th-acc-ink:#E7D091; --th-on-acc:#1A1605; --th-acc-rgb:220,192,121;
--th-gold:#DCC079; --th-gold-rgb:220,192,121; --th-ink:#F1F7F2; --th-tx:#BED6C8; --th-mut:#7FA593; --th-faint:#5B7E6D;
--th-line:#1E4B3B; --th-sf:#10362A; --th-sf2:#164434; --th-live:#5AD6A0; --th-border:#164031;
--th-disp:"Iowan Old Style",Georgia,"Times New Roman",ui-serif,serif;
--th-aca-bg:radial-gradient(120% 90% at 88% -6%,#0d3a2c 0%,#08211A 55%);
}
:root[data-theme="porcelain"]{
--page-bg:#F1EEE7;
--th-acc:#0E6E5B; --th-acc-ink:#0B5647; --th-on-acc:#FFFFFF; --th-acc-rgb:14,110,91;
--th-gold:#A9772E; --th-gold-rgb:169,119,46; --th-ink:#1B2529; --th-tx:#454F4E; --th-mut:#7B8582; --th-faint:#A6AEA9;
--th-line:#E4DED2; --th-sf:#FFFFFF; --th-sf2:#F6F3EC; --th-live:#0E6E5B; --th-border:#E4DED2;
--th-disp:"Iowan Old Style",Georgia,"Times New Roman",ui-serif,serif;
--th-aca-bg:#F1EEE7;
}
/* ---- global chrome ---------------------------------------------------------
Fixed Prism, read from :root. The selectors keep their :root[data-theme]
qualifier only for specificity over styles.css — the values no longer vary. */
:root[data-theme] .topbar{ background:var(--nav-bg); border-bottom:1px solid var(--nav-line); }
:root[data-theme] .topbar .nav-links a,
:root[data-theme] .topbar .linkbutton,
:root[data-theme] .topbar .nav-trigger{ color:var(--nav-dim); }
:root[data-theme] .topbar .nav-links a:hover,
:root[data-theme] .topbar .linkbutton:hover{ color:var(--nav-fg); }
:root[data-theme] .brand .brand-copy strong{ color:var(--nav-fg); }
:root[data-theme] .brand .brand-copy small{ color:var(--nav-dim); }
:root[data-theme] .footer{ background:var(--nav-bg); border-top:1px solid var(--nav-line); color:var(--nav-dim); }
:root[data-theme] .footer a{ color:var(--nav-acc); }
:root[data-theme] .footer strong{ color:var(--nav-fg); }
/* ---- dark page canvas: only on the AI-programme pages (body.prog-dark) ---- */
body.prog-dark{ background:var(--page-bg); }
/* ---- the refreshed shell, themed -------------------------------------------
The chrome is dark on every theme except porcelain, so the new nav parts have
to take their colours from the --nav-* layer rather than the light page
palette. Everything below is expressed in theme tokens, so all four themes
are covered by one set of rules. */
/* brand mark: a navy tile is invisible on a navy bar */
/* The mark is artwork now; the chrome must not paint anything behind or over it. */
:root[data-theme] .brand-mark{ background:none; }
/* current page marker */
:root[data-theme] .topbar .nav-links a[aria-current="page"]{
color:var(--nav-fg); background:var(--nav-line);
box-shadow:inset 0 -2px 0 var(--nav-acc);
}
:root[data-theme] .topbar .nav-links a:hover,
:root[data-theme] .topbar .linkbutton:hover,
:root[data-theme] .topbar .nav-trigger:hover{ color:var(--nav-fg); background:var(--nav-line); }
/* grouped menus */
:root[data-theme] .nav-menu[open] > summary{ color:var(--nav-fg); background:var(--nav-line); }
/* The panel drops out of the topbar, so it is CHROME and takes the fixed --nav-*
layer - the same rule the rest of this file follows. It previously drew its
background from --th-sf (the study surface) while its labels stayed on the
fixed --nav-dim. Those two vary independently, and on porcelain --th-sf is
#FFFFFF: the menu rendered light-grey-on-white at 2.15:1. Measured on
--brand-2: labels 6.96:1, links 12.9:1, current-page marker 6.16:1. */
:root[data-theme] .nav-panel{
background:var(--brand-2); border-color:var(--nav-line);
box-shadow:0 18px 44px rgba(0,0,0,.34);
}
:root[data-theme] .nav-panel p{ color:var(--nav-dim); }
:root[data-theme] .nav-panel a,
:root[data-theme] .nav-panel .linkbutton{ color:var(--nav-fg); }
:root[data-theme] .nav-panel a:hover,
:root[data-theme] .nav-panel .linkbutton:hover{ background:var(--nav-line); color:var(--nav-fg); }
:root[data-theme] .nav-panel a[aria-current="page"]{ color:var(--nav-acc); }
:root[data-theme] .nav-panel hr{ border-top-color:var(--nav-line); }
/* mobile disclosure */
:root[data-theme] .nav-toggle{ color:var(--nav-dim); border-color:var(--nav-line); }
:root[data-theme] .nav-toggle:hover{ color:var(--nav-fg); background:var(--nav-line); }
@media (max-width:1080px){
:root[data-theme] .nav-links{ background:var(--nav-bg); border-bottom-color:var(--nav-line); }
:root[data-theme] .nav-panel{ background:none; box-shadow:none; }
}
/* footer columns */
:root[data-theme] .footer-col a{ color:var(--nav-dim); }
:root[data-theme] .footer-col a:hover{ color:var(--nav-acc); }
:root[data-theme] .footer .muted{ color:var(--nav-dim); }
:root[data-theme] .footer-note{ border-top-color:var(--nav-line); color:var(--nav-dim); }