/* ============================================================ Theme: modern-uzh — layer 00 (foundation) Owns: @font-face for the theme's two type families, the :root token overrides and additions this theme needs on top of design/tokens.css + app.css, and the small set of base-element rules (body, :focus-visible, .mono, kbd, reduced-motion) that follow directly from those tokens rather than from any one component. Every other theme layer (10-shell through 50-apps) depends on this file being loaded and correct. Loaded after app.css and any per-page CSS. Reference: redesign/modern-uzh/README.md (design rationale) and the flattened demo stylesheet it was reviewed against. This file carries only the token-and-base-rule slice of that reference — shell/sheet/controls/table/stats live in the sibling layers. ============================================================ */ /* ---- fonts: Inter (OFL) + IBM Plex Mono (OFL), self-hosted --------------- Same convention as app.css's Fira Sans / JetBrains Mono block: never let the browser synthesise a weight that isn't shipped here. Inter var is a genuine variable font covering the full 100–900 axis, so one @font-face declares every weight the scale asks for. IBM Plex Mono ships only two static cuts (Regular 400, SemiBold 600) — same situation as Fira Sans, so nothing outside {400,600} may be requested of it anywhere this theme is loaded. Files come from design/fonts/fetch-fonts.sh, extended in this change to also pull these two families for modern-uzh; if they are absent the fallback stacks in --font-sans/--font-mono below take over and the theme is merely less tight, not broken. This file is served at /static/css/themes/modern-uzh/00-tokens.css and the fonts at /static/design/fonts/woff2/..., hence three levels of ../. Brackets and comma in the Inter filename are URL-encoded the same way design/tokens.css already encodes them for the other redesign directions. -------------------------------------------------------------------- */ @font-face { font-family: "Inter var"; src: url("../../../design/fonts/woff2/Inter[opsz,wght].5f2e91686377.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../../../design/fonts/woff2/IBMPlexMono-Regular.f841558be42c.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../../../design/fonts/woff2/IBMPlexMono-SemiBold.76456a3f6af7.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---- ground: modern's desk, not UZH Light Grey 3 ------------------- At this direction's sheet sizes (82rem wide, 236px rail already painted in grey) UZH's #E7E7E7 desk reads as a dirty surround rather than a surface. See redesign/modern-uzh/README.md, "Why the desk is not UZH Light Grey 3". Dark mode is untouched below — it already uses #171717 and the complaint doesn't arise there, so no dark-mode rule is needed for this token. ---------------------- */ --ground: #F5F6F8; /* ---- zebra: new. Striping fill for the redesigned data table, pinned to --surface-3 so it never leaves the existing grey ramp. */ --zebra: #FAFAFA; /* ---- danger-dim: correction, not redesign. BF0D3E (--danger) on the baseline's FBC6D4 measures 4.23:1 — below design/tokens.css's own 4.5:1 claim (see README, "Two contrast bugs inherited from the baseline"). FDE7EC is a lighter tint of the same non-corporate value and clears 5.33:1. This is a real bug in app.css too, not only in the reference; fixing it here fixes every .tag/.chip that already reads --danger-dim. Dark mode's #3D0417 already passes and is unchanged, so — like --ground above — no dark-mode rule follows. ------------------------------------------------------------------ */ --danger-dim: #FDE7EC; /* app.css's six --id-* avatar discs (--id-blue, --id-berry, --id-apple, --id-cyan, --id-orange, --id-slate) are deliberately left alone: its own comment explains they're theme-independent by design — a saturated fill needs to read on either ground, so they don't participate in re-theming the way semantic/UI tokens do. Nothing in this file touches them. */ /* ---- depth: modern's shadow family, new ---------------------------- Three tiers: resting card, sheet elevation, hover lift. --halo replaces the baseline's implicit browser focus glow with UZH Blue at low alpha, used by :focus-visible below and by every focusable control in 20-controls.css. --------------------------------------- */ --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05); --shadow-2: 0 1px 2px rgba(0,0,0,.05), 0 14px 34px -10px rgba(0,0,0,.14); --shadow-lift: 0 2px 4px rgba(0,0,0,.06), 0 18px 34px -12px rgba(0,40,165,.22); --halo: 0 0 0 4px rgba(0,40,165,.14); /* app.css already has --shadow-page (.auth__sheet, .sheet, .page) and --shadow-pop (dropdown menus, the slide-over .panel, .dialog) — the reference never had these names, but every panel in the app uses one of the two, so they're re-pointed into the new family rather than left orphaned in the old flatter shadow language: --shadow-page -> --shadow-2 structurally identical jobs: a large surface elevated once, directly off "sheet elevation". --shadow-pop -> --shadow-lift the app's floating overlays (menus/panel/dialog) sit at the top of the z-index stack, above sheet-level content, so they take the strongest of the three tiers. Reference only ever triggers --shadow-lift on :hover; here it's applied to a persistent-while-open state instead of a hover state — same magnitude, different trigger. Flagged as a judgement call, not a value taken verbatim from the reference. These two lines repeat, unchanged, in the dark blocks below: design/ tokens.css defines dark-specific --shadow-page/--shadow-pop of its own under :root:not([data-theme="light"]) and :root[data-theme= "dark"], both more specific than a bare :root override, so the remap has to be restated at matching specificity in each guarded block to actually win in dark mode. */ --shadow-page: var(--shadow-2); --shadow-pop: var(--shadow-lift); /* ---- radius: modern's rounder language -------------------------- */ --radius: 10px; --radius-sm: 7px; --radius-pill: 999px; --radius-page: 16px; /* ---- type: Inter + IBM Plex Mono, and the sizes tuned for them. --text-ui / --text-label / --text-data are unchanged from design/ tokens.css (0.875rem / 0.6875rem / 0.8125rem alike) and are not restated. --measure (68ch) is likewise identical and skipped. */ --font-sans: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --text-entry-title: 1.9rem; --text-body: 1rem; --text-body-h: 1.15rem; --leading-body: 1.6; /* ---- row rhythm: functional's, one notch looser for Inter --------- New tokens — --row/--row-pad drive the redesigned .data-table in 30-tables.css. Density-variable via :root[data-density] below. --control-h is the one height shared by inputs, selects and buttons in 20-controls.css: a