/*
 * Design tokens (WWW-08): the only names components may use for colors, radii, spacing and fonts.
 *
 * Color tokens have no value here; every theme sets all of them for each mode in
 * themes/{name}.css under html[data-theme="{name}"][data-mode="light|dark"]:
 *   --color-bg          page background
 *   --color-surface     header, footer, panels
 *   --color-text        body text
 *   --color-text-muted  metadata, hints
 *   --color-accent      links, focus, the single accent color
 *   --color-border      1 px lines
 *
 * Structural tokens below are shared defaults; a theme may override them.
 * Components (.razor, .razor.css) never contain color literals (#, rgb(, hsl().
 */
:root {
    --radius: 4px;
    --line: 1px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
    --font-weight-heading: 500;

    --header-height: 56px;
    --content-max-width: 1100px;
}