:root {
    --brand-font-sans: 'Public Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --brand-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --brand-font-weight-regular: 400;
    --brand-font-weight-medium: 500;
    --brand-font-weight-semibold: 600;
    --brand-font-weight-bold: 700;
    --brand-line-height-tight: 1.15;
    --brand-line-height-body: 1.65;
    --brand-line-height-loose: 1.8;
    --brand-font-size-xs: 0.8125rem;
    --brand-font-size-sm: 0.9375rem;
    --brand-font-size-md: 1rem;
    --brand-font-size-lg: 1.125rem;
    --brand-font-size-xl: 1.375rem;
    --brand-font-size-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.35rem);
    --brand-font-size-3xl: clamp(2.15rem, 1.7rem + 1.8vw, 3.25rem);
    --brand-space-1: 0.25rem;
    --brand-space-2: 0.5rem;
    --brand-space-3: 0.75rem;
    --brand-space-4: 1rem;
    --brand-space-5: 1.5rem;
    --brand-space-6: 2rem;
    --brand-space-7: 3rem;
    --brand-radius-sm: 0.5rem;
    --brand-radius-md: 1rem;
    --brand-radius-lg: 1.5rem;
    --brand-shadow-soft: 0 18px 40px rgba(17, 28, 45, 0.12);
    --brand-shadow-card: 0 24px 60px rgba(17, 28, 45, 0.14);
    --brand-color-text: #122033;
    --brand-color-text-muted: #5d6c80;
    --brand-color-heading: #0b1627;
    --brand-color-link: #0f88f2;
    --brand-color-link-hover: #0b6dca;
    --brand-color-border: rgba(18, 32, 51, 0.12);
    --brand-color-surface: #ffffff;
    --brand-color-surface-muted: #f5f8fc;
    --brand-color-surface-alt: #eef4fb;
    --brand-color-accent: #0f88f2;
    --brand-color-accent-strong: #1157bf;
    --brand-color-accent-soft: rgba(15, 136, 242, 0.12);
    /* The accent ramp as one value. Everything wearing "the brand tile" — the
       panel-head icons, the section icons on the politik/ekonomi/säkerhet
       pages, the sidebar rail — takes it from here, so the three cannot drift
       apart the way they did when each wrote its own gradient. */
    --brand-gradient-accent: linear-gradient(135deg, var(--brand-color-accent) 0%, var(--brand-color-accent-strong) 100%);
    /* The same ramp for a surface far taller than a 30px tile. It finishes
       inside the first 320px and holds the end colour below that, so a
       full-height rail reads as the tile's deep blue instead of stretching the
       bright start over the whole viewport — which is what made the sidebar
       look like a different colour from the tiles it is supposed to match. */
    --brand-gradient-accent-tall: linear-gradient(135deg, var(--brand-color-accent) 0%, var(--brand-color-accent-strong) 320px);
    --brand-color-success: #18824f;
    --brand-color-danger: #b4453c;
}