/** * Design tokens, light and dark (framework core). * * Three layers, in this order: * 1. :root light values, the baseline * 2. @media (prefers-color-scheme: dark) the system preference * 3. :root[data-theme="light|dark"] an explicit choice, which wins * * Layer 3 must come last and must set BOTH directions, or a visitor whose system * is dark cannot choose light: the media query would keep overriding them. * * A fork rebrands by overriding the --brand-* values in its own stylesheet. The * semantic tokens below are derived from them, so a single accent change carries * through both themes. * * Every foreground/background pair here is measured against WCAG 2.1 AA * (>= 4.5:1 body text, >= 3.0:1 large text and UI). tests/contrast.test.mjs * re-measures them, so a rebrand that breaks contrast fails the test run rather * than shipping. */ /* JBC-03 (christiane-mayer): the original site (christianemayer.de) sets Roboto as every Elementor global-typography role (post-12.css's Kit stylesheet, --e-global-typography-*-font-family: "Roboto" on all four roles: primary, secondary, text, accent). framework.md's hard rule ("no third-party loads before consent") and tools/gate/rules/fonts.mjs's FONT-EXTERNAL check both require a local file, not a Google Fonts CDN link, so this ships the three weights the site actually uses (400 body, 500 emphasis/nav, 700 headings) as self-hosted woff2, "latin" subset only (U+0000-00FF, which covers German umlauts and ß plus the full ASCII/EN range; the "latin-ext" subset Google also serves is Central/East-European diacritics this fork's DE/EN content never uses). font-display: swap avoids a flash of invisible text while the file loads. */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-400.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-500.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-700.woff2") format("woff2"); } :root { color-scheme: light dark; /* --- brand seed: a fork overrides these five and inherits the rest -------- JBC-03 (christiane-mayer): sourced from the original site's Elementor global kit (christianemayer.de, elementor/css/post-12.css, the site-wide Kit stylesheet), the only place a WordPress/Elementor site declares its brand palette once for every page. Kit primary #6a7c5b (sage green) was NOT usable as-is: as --accent-text (a fork's link colour, tested against BOTH --surface #FFF and --bg #FBFBFC) it measures 4.52:1 on white but only 4.37:1 on --bg, under the 4.5:1 AA floor tests/contrast.test.mjs enforces. Darkened to the deepest sage that still reads as the same hue family while clearing both surfaces with margin (6.88:1 / 6.65:1). The dark-theme counterpart is a fresh, brighter sage (not a straight lighten of the light value, same reasoning tokens.css's own dark block comments give for every other token pair) so it reads AS an accent against a dark surface, not as a desaturated afterthought. */ --brand-accent: #4F5F44; /* primary action / link colour, light theme */ --brand-accent-dark: #8FBE79; /* the same idea on a dark surface */ --brand-accent-2: #5F7350; /* gradient partner */ /* JBC-27 (25.09.2026): theme-fix ON PURPOSE, KEIN Dark-Wert. Grund ist site/editor/assets/admin-brand.css (core:once[editor]): es bindet --rbe-navy-950/--rbe-navy-900 an genau DIESEN Token, weil admin.css's eigener Kommentar die Admin-Topleiste/den Login-Gradient/den Gold-Button-Text als "fixed brand ink... intentionally does NOT change between themes" beschreibt, gegen einen FESTEN weißen Text (.rbe-topbar { color:#fff }). Ein Versuch, --brand-ink hier einen Dark-Wert zu geben, riss admin-brand.css's Bindung mit: Topbar- Hintergrund gegen den festen weißen Text fiel gemessen von 13,77:1 auf 1,16:1, siehe PR #14 (JBC-27) fuer die volle Messung. NIE als Textfarbe auf --bg/--surface verwenden, im dunklen Theme misst --brand-ink dort nur 1,19 bis 1,34:1 (site.css's .site-nav-brand, page-home.css/page-ueber-mich.css's Headings dokumentieren dieselbe Falle aus der JBC-10-Review). Für Text immer var(--text) oder var(--text-2) nutzen, die sind theme-aware. */ --brand-ink: #26301F; /* headline ink, sage-tinted deep neutral */ --brand-surface: #FFFFFF; /* --- surfaces ------------------------------------------------------------ */ --bg: #FBFBFC; --bg-2: #F2F5F6; --surface: var(--brand-surface); --surface-2: #F7F9FA; /* --line is decorative (card dividers, hairlines) and is not held to the 3:1 rule. --line-strong is the one that bounds a UI component (input, select, checkbox) and therefore must meet WCAG 1.4.11 non-text contrast. Using one token for both is what quietly makes form fields fail. */ --line: #D3DDE1; --line-soft: #E6ECEF; --line-strong: #7E8F9A; /* --- text ---------------------------------------------------------------- */ --text: #14202B; /* 15.5:1 on --surface */ --text-2: #4A5C68; /* 6.95:1 on --surface */ /* SHR-02: raised from #64757F. That value cleared --surface (4.78:1) and --bg (4.62:1) but sat at 4.36:1 on --bg-2, below the 4.5:1 AA floor (design-reviewer BLOCKER, PR #166; shop.css's .mv-ext-openall-note still carries that history and its own workaround of using --text-2 instead). #5E6F79 clears all three: 5.22:1 / 5.04:1 / 4.76:1. */ --text-3: #5E6F79; /* 4.76:1 on --bg-2, the AA floor for body text */ /* --- accent -------------------------------------------------------------- */ --accent: var(--brand-accent); --accent-2: var(--brand-accent-2); --accent-text: var(--brand-accent); /* accent used AS text on a surface */ /* Brand seed, sixth member: not derived from --brand-accent via var(), so a fork rebrand that only overrides the five --brand-* values above leaves this hardcoded to teal. A fork MUST override --accent-soft (and its dark counterpart below) alongside the --brand-* set, or its badges/pills keep the house tint after a rebrand. */ /* JBC-03: recomputed from --brand-accent #4F5F44 at the same .12 alpha the framework default used, composited over --surface per resolveHex()'s own compositing rule. --accent-text on this composited value measures 5.79:1, comfortably clear of the 4.5:1 pair the gate checks ('label on the "+n" gallery overflow tile / verified-review badge'). */ --accent-soft: rgba(79, 95, 68, .12); /* tinted pill background */ --on-accent: #FFFFFF; /* text on a filled accent surface */ --panel-a: #E8EFF1; /* image placeholder gradient */ --panel-b: #F5F8F9; /* --- secondary button (SHR-02): a solid tint, not --surface-2/--line-strong (that pairing is a plain neutral card, not a button). No color-mix(): the gate (tools/gate/rules/contrast.mjs) resolves one var() indirection to a literal hex, it cannot evaluate a color-mix() expression. Measured: --btn-2-text on --btn-2-bg = 9.87:1, --btn-2-line on --bg = 3.43:1. Same brand-seed caveat as --accent-soft above: these three are hand- picked hex, not derived from --brand-accent via var(), so a fork rebrand that only overrides the five --brand-* values leaves the secondary button on the house teal tint. A fork MUST re-measure and override --btn-2-bg/--btn-2-text/--btn-2-line (light and dark, see the matching blocks below) alongside the --brand-* set. JBC-03: re-measured for the sage rebrand, --btn-2-text on --btn-2-bg = 9.24:1, --btn-2-line on --bg = 4.06:1. */ --btn-2-bg: #E7EDE3; --btn-2-text: #33402A; --btn-2-line: #6E8259; /* Chevron for styled