/* Design tokens: the ONLY place for colors, fonts, spacing and radii.
   Change a value here and the whole site follows.
   Contrast (WCAG AA, checked): text 11.9:1 on background; link color 6.4:1 on background;
   white on accent (buttons) 4.75:1; white on primary 13.1:1. Do not use --color-accent as small text on light backgrounds. */
:root {
    /* Brand palette */
    --color-primary: #15324F;        /* headings, navigation, footer */
    --color-accent: #087F8C;         /* primary buttons (white text) */
    --color-accent-hover: #066570;   /* button hover; also the text-link color (higher contrast) */
    --color-background: #F5F8FA;     /* page background */
    --color-surface: #FFFFFF;        /* cards and alternating bands */
    --color-text: #263445;           /* reading text */
    --color-border: #DCE5EB;

    /* Derived */
    --color-link: var(--color-accent-hover);
    --color-text-muted: #4A5B6D;
    --color-accent-soft: #E3F2F4;    /* icon badges, disclosure box */
    --color-on-dark: #E4ECF2;        /* text on the primary-colored footer */
    --color-focus: #15324F;          /* 12:1+ on light backgrounds */
    --color-focus-on-dark: #FFFFFF;  /* footer */
    --shadow-card: 0 1px 2px rgba(21, 50, 79, 0.06), 0 4px 14px rgba(21, 50, 79, 0.05);

    /* Type: one sans-serif family (system fonts: no download, fast, legible) */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-body);
    --font-size-base: 1.0625rem;
    --line-height: 1.65;

    /* Spacing and shape */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --space-7: 6rem;
    --radius: 10px;
    --radius-lg: 16px;
    --container-width: 70rem;
    --prose-width: 44rem;
}