/* moiree.eu — design tokens ═══════════════════════════════════════════════════════════════════════ THE single source for colour, type, radius and spacing values. Both the public site and admin/ load this file; neither declares these values again. It exists because they used to be declared twice. admin/index.html carried its own :root block of 25 custom properties — 2 724 lines of CSS in one inline \3c style> with no linked stylesheet at all — and the two copies had already drifted: --teal was #0F6E56 there and #2CA882 here (the admin had the light-theme value on its dark theme), --font-ui was still the system stack, and the light --text3 and --coral-text differed by enough to matter for contrast. None of that was a decision; it was two files ageing apart. What the admin genuinely wants different — a whiter ground for a dense data tool — stays in admin/index.html as a short, explicit override block, so the difference is visible as a difference rather than hidden as a duplicate. Load order: this file, then style.css, then ui-toolkit.css. ═══════════════════════════════════════════════════════════════════════ */ :root { /* `color-scheme` tells the browser how to draw the controls it draws itself: select popups, checkboxes, scrollbars, date pickers, the canvas behind the page. Declared as `light dark` it says "either is fine", so those elements follow the OPERATING SYSTEM rather than the site — which is how someone with a dark system and the site set to light ended up with a dark dropdown menu opening out of a light page. It is stated per theme now, so the native parts and the drawn parts agree. */ color-scheme: dark; /* Dark mode — default */ --bg: #1a1a18; --bg2: #222220; --text: #f0ede6; --text2: #b4b2a9; --text3: #999891; --border: rgb(255 255 255 / 12%); --border2: rgb(255 255 255 / 22%); --primary: #7A5AB5; --primary-text: #B99EE0; --primary-light: #1e1535; --primary-dark: #D4BCFF; --coral-text: #E8734A; --teal: #2CA882; --teal-light: #0a2e24; --coral: #D85A30; --coral-light: #2e0f0f; --amber: #d4a843; --amber-light: #2e2510; --purple: #534AB7; --purple-light: #1a1840; --blue: #3B8AD4; --blue-light: #0a2844; /* Font roles — Option A of the toolkit audit, settled 2026-08-16. Three families, and every one of them a file this repo ships. `--font-ui` used to be `system-ui, -apple-system, sans-serif`, which is not a typeface: it is SF on macOS, Segoe on Windows and Roboto on Android. So the buttons, labels, badges and error messages — the parts of the page a reader looks at most often — were a different design on every visitor's machine, and the one instruction the whole font pass exists to satisfy ("the same everywhere") could not be met while it was there. CivicTheme's own answer is that a label is not a different typeface, it is the same typeface at a different size and weight; it assigns headings, text and labels alike to one family and reserves monospace for code. That is what these four tokens now say: --font-headline display, headings, pull quotes --font-body running text --font-chrome labels, buttons, badges, tabs, chips, errors --font-mono DATA ONLY — case IDs, timestamps, counts, code Mono for a sentence was the clearest thing to lose. "Bitte wähle einen Zeitraum aus" is read by someone under stress, and set in monospace it reads slower and looks like console output. Chrome is IBM Plex Sans — Option B. It was Option A (Source Serif at 600, no fourth family) and that was REVERSED at the project owner's direction after seeing it rendered: a reading serif at 10-12px in a badge or a nav item reads as small body copy, and the site lost the separation between "text you read" and "controls you use". Three faces became four, which is the whole price, and it is one 51K file. Not system-ui, which is what chrome was before Option A. system-ui is a different typeface on every visitor's machine — SF Pro, Segoe, Roboto — so the design would only be true on the designer's laptop. Plex Sans is also the sibling of the mono already shipped, so the family reads as one system rather than as a borrowed sans. */ --font-headline: 'Playfair Display', serif; --font-body: 'Source Serif 4', serif; --font-chrome: 'IBM Plex Sans', sans-serif; --font-chrome-weight: 600; --font-mono: 'IBM Plex Mono', monospace; /* Deprecated alias. 26 rules in this file still name it and they should all end up on --font-chrome or --font-body; keeping the alias means that is a rename to do at leisure rather than a 26-site edit bundled into the switch itself. It is no longer a system stack — that is the point. */ --font-ui: var(--font-chrome); /* The toolkit's single switch for every label, button, badge, tab, chip and error message. Defined here rather than only on `.ui` so that admin/ and any page outside a `.ui` root resolve it too. */ --ui-font-chrome: var(--font-chrome); /* One step above --bg2, for the state a card enters on hover or focus. `--bg3` was already referenced (the checkbox tooltip falls back to #333) and never defined, so that fallback is what shipped. */ --bg3: #2b2b28; /* The six experience-type colours, as tokens rather than as six hexes repeated per theme. `--ui-badge-color` and the card's left hairline both read them, so a type is one value in one place. */ --type-gatekeeping: #D4BCFF; --type-paygap: #5DCAA5; --type-tokenism: #B8B0A8; --type-harassment: #F0997B; --type-invisiblelabor: #7BBBF0; --type-genderexclusion: #E8B55A; /* The select indicator, so the control draws its own arrow instead of whatever the OS draws at whatever distance from the edge it likes. Two cuts, one per theme, because a chevron is a stroke colour and cannot be recoloured through currentColor once it is a background image. */ --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23b4b2a9' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --select-chevron-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23f0ede6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Form controls get a real pixel. --border-width is 0.5px and stays 0.5px: the hairline is the look of this site and it is right for a card edge or a table rule, where the line is decoration. On an input the border is not decoration, it is the thing that says where the field is — and 0.5px rounds to nothing on a 1x display and to a grey smear on 1.5x. This is the one place the hairline is the wrong instrument. */ --border-width-control: 1px; /* Every control a finger has to hit. 44px is the size a target has to be before it stops being a coin toss on a phone; the fields were 38–40px. */ --control-min-height: 44px; /* Layout */ --max-width: 1080px; --border-width: 0.5px; --radius-card: 8px; --radius-btn: 6px; --radius-badge: 4px; } [data-theme="light"] { color-scheme: light; --bg3: #dbdad5; --type-gatekeeping: #4A3080; --type-paygap: #085041; --type-tokenism: #5C554D; --type-harassment: #501313; --type-invisiblelabor: #0C447C; --type-genderexclusion: #7C4B0A; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235f5e5a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --select-chevron-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231a1a18' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --bg: #edece8; --bg2: #e5e4e0; --text: #1a1a18; --text2: #5f5e5a; --text3: #636260; --border: rgb(0 0 0 / 12%); --border2: rgb(0 0 0 / 22%); --primary-text: #6B4FA0; --primary-light: #F0EAFB; --primary-dark: #4A3080; --coral-text: #A84018; --teal-light: #E1F5EE; --coral-light: #FCEBEB; --purple-light: #EEEDFE; --blue-light: #E6F1FB; --amber: #b8942a; --amber-light: #fff8e6; }