:root {
    --color-ink: #182225;
    --color-ink-soft: #344347;
    --color-muted: #647277;
    --color-canvas: #f7faf9;
    --color-surface: #ffffff;
    --color-surface-subtle: #eef3f1;
    --color-surface-inset: #e7eeeb;
    --color-toolbar: #f4f7f6;
    --color-rail: #c5d1cd;
    --color-line: #d6dfdc;
    --color-line-strong: #aebbb7;
    --color-action: #087f7a;
    --color-action-strong: #05645f;
    --color-action-soft: #dcefed;
    --color-attention: #d9761d;
    --color-attention-soft: #fff0df;
    --color-critical: #c4473d;
    --color-critical-soft: #fbe9e7;
    --color-acc: #2f6f9f;
    --color-acc-soft: #e5f0f7;
    --color-focus: #05645f;
    --color-focus-soft: rgb(8 127 122 / 20%);
    --color-on-action: #ffffff;
    --color-route: #087f7a;
    --color-route-soft: #dcefed;
    --color-blueprint: #2f6f9f;

    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", sans-serif;
    --font-data: "IBM Plex Mono", "Consolas", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-hero: 6.25rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --radius-sm: 4px;
    --radius-control: 6px;
    --shadow-raised: 0 14px 36px rgb(24 34 37 / 12%);
    --shadow-control: 0 1px 2px rgb(24 34 37 / 10%);

    --header-height: 4rem;
    --panel-header-height: 3.75rem;
    --control-height: 2.5rem;
    --route-rail-width: 3px;
    --content-width: 120rem;
    --shell-gutter: clamp(1rem, 2vw, 2.5rem);
    --layer-header: 100;
    --layer-overlay: 200;
    --layer-toast: 300;
}