/* ============================================================================= ZEC Registry — design system · "Quiet heritage" (Direction A) A parish-register aesthetic for creation care: parchment + fir + a gilt accent, Spectral for headings, IBM Plex Sans for UI, IBM Plex Mono for codes. Layered over Bootstrap 5.3 by overriding its CSS variables + a few components. --------------------------------------------------------------------------- Theme: light by default; follows the OS setting automatically (auto); a manual Auto/Light/Dark toggle sets html[data-theme] to override. See zec-theme.js. ============================================================================= */ @import url('/fonts/fonts.css'); /* ---------- tokens: LIGHT (base) ---------- */ :root { --parchment:#F4F0E6; --paper:#FBFAF5; --ink:#24312B; --muted:#6B7169; --fir:#1F4E3D; --fir-2:#2E6650; --moss:#6E8B5A; --gilt:#B8863B; --stone:#DED8CA; --stone-2:#E9E4D7; --field:#FFFFFF; --field-bd:#D3CCBB; --bar:#1F4E3D; --topbar-text:#EDE7D6; --topbar-mut:#C4CEC1; /* certificate status (map + legend). Awarded tiers kept for when data lands. */ --st-none:#A9A597; --st-progress:#6E8B5A; --st-certified:#B8863B; --pin-gold:#D4A418; --pin-silver:#8D9BB0; --pin-bronze:#B07C4A; --shadow:0 1px 3px rgba(40,45,38,.08), 0 8px 24px rgba(40,45,38,.05); --sel-lockup:url('/img/sel-lockup-light.svg'); color-scheme: light; /* map the palette onto Bootstrap so its components inherit the look */ --bs-body-bg: var(--parchment); --bs-body-color: var(--ink); --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--stone-2); --bs-border-color: var(--stone); --bs-link-color: var(--fir); --bs-link-hover-color: var(--fir-2); --bs-primary: var(--fir); --bs-primary-rgb: 31,78,61; } /* ---------- tokens: DARK — applied automatically when the OS is dark and the user has NOT chosen a theme, OR explicitly when data-theme="dark". ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --parchment:#141E19; --paper:#1A2620; --ink:#E7E1D2; --muted:#9AA79C; --fir:#4E8F73; --fir-2:#5FA184; --moss:#82A46B; --gilt:#CDA054; --stone:#2C3A33; --stone-2:#243029; --field:#182320; --field-bd:#33443B; --bar:#16342A; --topbar-text:#E7E1D2; --topbar-mut:#9FB0A4; --st-none:#8E958A; --st-progress:#82A46B; --st-certified:#CDA054; --shadow:0 1px 3px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); --sel-lockup:url('/img/sel-lockup-dark.svg'); color-scheme: dark; --bs-tertiary-bg: var(--stone-2); } } :root[data-theme="dark"] { --parchment:#141E19; --paper:#1A2620; --ink:#E7E1D2; --muted:#9AA79C; --fir:#4E8F73; --fir-2:#5FA184; --moss:#82A46B; --gilt:#CDA054; --stone:#2C3A33; --stone-2:#243029; --field:#182320; --field-bd:#33443B; --bar:#16342A; --topbar-text:#E7E1D2; --topbar-mut:#9FB0A4; --st-none:#8E958A; --st-progress:#82A46B; --st-certified:#CDA054; --shadow:0 1px 3px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); --sel-lockup:url('/img/sel-lockup-dark.svg'); color-scheme: dark; --bs-tertiary-bg: var(--stone-2); } /* ---------- base ---------- */ body { background: var(--parchment); color: var(--ink); font-family: var(--bs-body-font-family); } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family:"Spectral", Georgia, serif; } code, .zec-mono { font-family:"IBM Plex Mono", ui-monospace, monospace; } a { text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; } /* ---------- app shell: top bar + left menu ---------- Pages with navigation get
+