/* * The deployment-editable token layer, served by `GET /theme/tokens.css` * (UI-UX theme-and-i18n.md section 1.4). * * THIS FILE IS THE SERVER DEFAULT, not a static asset. `packages/http` reads it at build time * through `tools/scripts/build-auth-assets.ts` and serves it from a route, so the theme record * can override any value here without a deploy once M18 lands. Every token carries a default, * so a theme row that sets none still renders. * * Dark is scoped to `[data-theme="dark"]` rather than `:root` so any subtree can be flipped and * so the same file serves a preview grid. The server stamps `data-theme` on `` from the * `ausweis_theme` cookie; the media query covers "the visitor has expressed no preference". * * `custom_css` from the theme record is appended below the last line at render time. */ :root, [data-theme='light'] { /* Colour */ --color-bg: #f5f6f8; --color-surface: #ffffff; --color-surface-raised: #f7f8fa; --color-border: #e3e6eb; --color-border-strong: #aeb7c2; --color-text: #14181d; --color-text-muted: #4e5866; --color-text-inverse: #ffffff; --color-accent: #1b3f8f; --color-accent-hover: #163475; --color-accent-active: #112a5e; --color-focus: #1e88e5; --color-danger: #b3261e; --color-danger-bg: #fdecea; --color-danger-text: #8c1d18; --color-warning: #8a5a00; --color-warning-bg: #fff6e2; --color-warning-text: #664300; --color-success: #1a7a4c; --color-success-bg: #e9f5ee; --color-success-text: #14603c; --color-link: #1b3f8f; --color-link-visited: #4a3a8f; /* * Typography. IBM Plex is SELF-HOSTED: the @font-face block lives in auth.css and the files are * served from our own origin, because `font-src` is `'self'` and a Google Fonts link would be a * third-party request the CSP refuses (UI-UX csp.md section 1). */ --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-base: 1rem; --font-size-sm: 0.8125rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --line-height-base: 1.55; --line-height-tight: 1.25; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 600; /* Space */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3.5rem; /* Shape */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(20, 24, 29, 0.06); --shadow-md: 0 1px 3px rgba(20, 24, 29, 0.08), 0 8px 24px -12px rgba(20, 24, 29, 0.18); --border-width: 1px; --focus-ring-width: 2px; --focus-ring-offset: 2px; --max-width-form: 26rem; /* Motion */ --duration-fast: 90ms; --duration-base: 160ms; color-scheme: light; } /* * Dark. An explicit choice, set by the appearance menu and carried in a cookie the server reads * before it renders, so there is no flash of the wrong theme on first paint. */ [data-theme='dark'] { --color-bg: #0f1319; --color-surface: #161b22; --color-surface-raised: #1c222b; --color-border: #2a323d; --color-border-strong: #46515f; --color-text: #e7ebf0; --color-text-muted: #9aa5b3; --color-text-inverse: #0f1319; /* The light accent fails contrast on a dark surface, so dark gets its own. */ --color-accent: #4d84e6; --color-accent-hover: #6b9aeb; --color-accent-active: #3d6fc9; --color-focus: #6cb6ff; --color-danger: #b8484a; --color-danger-bg: #2a1618; --color-danger-text: #f4a9ab; --color-warning: #9a7020; --color-warning-bg: #251c0c; --color-warning-text: #e8c37e; --color-success: #3f9a6a; --color-success-bg: #12241b; --color-success-text: #86d3a8; --color-link: #79a9f0; --color-link-visited: #b09ae8; /* Elevation reads as light on dark, not as a deeper drop shadow. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* * "Match my device", which is also the state of a visitor who has never opened the menu. Scoped to * `:root:not([data-theme])` so an explicit light choice is never overridden by the OS setting. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #0f1319; --color-surface: #161b22; --color-surface-raised: #1c222b; --color-border: #2a323d; --color-border-strong: #46515f; --color-text: #e7ebf0; --color-text-muted: #9aa5b3; --color-text-inverse: #0f1319; --color-accent: #4d84e6; --color-accent-hover: #6b9aeb; --color-accent-active: #3d6fc9; --color-focus: #6cb6ff; --color-danger: #b8484a; --color-danger-bg: #2a1618; --color-danger-text: #f4a9ab; --color-warning: #9a7020; --color-warning-bg: #251c0c; --color-warning-text: #e8c37e; --color-success: #3f9a6a; --color-success-bg: #12241b; --color-success-text: #86d3a8; --color-link: #79a9f0; --color-link-visited: #b09ae8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7); color-scheme: dark; } } /* custom_css from the theme record is appended below this line at render time. */