/* * Design tokens. * * The dark values are sampled from mock_main_page.png rather than eyeballed — the mockup * is a very dark, low-saturation navy whose surfaces differ from the page background by * two or three points of lightness, and a "close enough" guess reads as a different * design. Where a light-theme counterpart had to be invented (the mockup only draws the * dark theme) the pairing keeps the same *relationships*: surfaces sit one step off the * background, borders one step off the surface. * * ── Which theme wins ──────────────────────────────────────────────────────────── * F-28 AC 140: with no stored choice, follow the system, defaulting to light. So :root * is light, `prefers-color-scheme: dark` overrides it, and an explicit * [data-theme] on overrides both — including back to light on a machine set to * dark, which is why the light block is repeated rather than left to the cascade. */ :root { color-scheme: light; /* Surfaces */ --slf-bg: #f2f5f7; --slf-bg-header: #ffffff; --slf-surface: #ffffff; --slf-surface-2: #f7f9fa; --slf-surface-3: #eef2f5; --slf-border: #dde3e9; --slf-border-strong: #c6d0d9; /* Text */ --slf-text: #0b1520; --slf-text-2: #3d4a57; /* * Dark enough to clear WCAG AA (4.5:1) on the *tinted* surfaces, not just on white. * A verified lawyer's answer lays an 8% accent wash over the card, and the timestamps, * "Reply / Quote / Edit" links and the accept button all sit on it at normal size — * measured 4.39:1 there at the previous #64727f, which is a fail. #5b6874 measures * 5.08:1 against that darkest tint, so every lighter surface has more headroom still. */ --slf-text-muted: #5b6874; --slf-text-inverse: #ffffff; /* Brand — the olive-green of the mockup's buttons (#3f6222) */ --slf-accent: #3f6222; --slf-accent-hover: #4d7729; --slf-accent-soft: #e8f0dd; --slf-accent-text: #33511b; --slf-on-accent: #ffffff; /* Status */ --slf-urgent: #c8271b; --slf-urgent-soft: #fdecea; --slf-solved: #2f7a4a; --slf-focus: #1a6fd4; /* * How a category's own colour is adjusted before it is used as text. * * The fourteen category colours are sampled from the mockup, which is dark — used * unmodified on a white background the lighter ones (the teal of Zivilrecht, the amber * of Steuern) land around 2.5:1 and fail WCAG AA outright. Rather than maintaining two * hand-picked palettes that would drift apart the moment an administrator adds a * category, the single stored colour is blended toward the text colour: darkened on * light, lightened on dark. One value in term meta, legible in both themes. */ --slf-cat-strength: 62%; --slf-cat-blend: #000000; /* Shape and depth */ --slf-radius: 10px; --slf-radius-lg: 14px; --slf-radius-pill: 999px; --slf-shadow: 0 1px 2px rgb(11 21 32 / 6%), 0 2px 8px rgb(11 21 32 / 4%); /* Rhythm — one scale, so spacing never becomes a per-component invention */ --slf-space-1: 0.25rem; --slf-space-2: 0.5rem; --slf-space-3: 0.75rem; --slf-space-4: 1rem; --slf-space-5: 1.5rem; --slf-space-6: 2rem; --slf-space-7: 3rem; /* * System font stack: no webfont request on the critical path. NF-01 gives the whole * page 2.5s on a mobile connection, and a font file is the easiest 200ms to not spend. */ --slf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --slf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --slf-text-xs: 0.75rem; --slf-text-sm: 0.875rem; --slf-text-base: 1rem; --slf-text-lg: 1.125rem; --slf-text-xl: 1.375rem; --slf-text-2xl: 1.75rem; --slf-text-3xl: 2.25rem; /* * Layout. The container is the reading measure's real constraint: the feed is whatever * is left after the sidebar and the rail, so all three move together. At 1320px the * feed settles around 640px — roughly 75 characters of a topic title — where 1640px * left it near 750px and the eye had to travel the width of a large monitor to get * from a title to its reply count. */ --slf-container: 1320px; --slf-sidebar: 272px; --slf-rail: 312px; --slf-header-height: 72px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --slf-bg: #000e1b; --slf-bg-header: #000813; --slf-surface: #000f1c; --slf-surface-2: #01111e; --slf-surface-3: #04182a; --slf-border: #14293c; --slf-border-strong: #1e3a52; --slf-text: #f2f6fa; --slf-text-2: #c3ccd6; --slf-text-muted: #8b98a6; --slf-text-inverse: #000e1b; --slf-accent: #3f6222; --slf-accent-hover: #4f7a2b; --slf-accent-soft: #2b411a; --slf-accent-text: #8fc46b; --slf-on-accent: #ffffff; --slf-urgent: #e2564a; --slf-urgent-soft: #3a1512; --slf-solved: #5cb37f; --slf-focus: #6aa9f0; --slf-cat-strength: 78%; --slf-cat-blend: #ffffff; --slf-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 10px rgb(0 0 0 / 30%); } } :root[data-theme="dark"] { color-scheme: dark; --slf-bg: #000e1b; --slf-bg-header: #000813; --slf-surface: #000f1c; --slf-surface-2: #01111e; --slf-surface-3: #04182a; --slf-border: #14293c; --slf-border-strong: #1e3a52; --slf-text: #f2f6fa; --slf-text-2: #c3ccd6; --slf-text-muted: #8b98a6; --slf-text-inverse: #000e1b; --slf-accent: #3f6222; --slf-accent-hover: #4f7a2b; --slf-accent-soft: #2b411a; --slf-accent-text: #8fc46b; --slf-on-accent: #ffffff; --slf-urgent: #e2564a; --slf-urgent-soft: #3a1512; --slf-solved: #5cb37f; --slf-focus: #6aa9f0; --slf-cat-strength: 78%; --slf-cat-blend: #ffffff; --slf-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 10px rgb(0 0 0 / 30%); }