:root {
    /* Color foundation */
    --color-text-primary: #172033;
    --color-text-secondary: #687386;
    --color-text-inverse: #ffffff;

    --color-surface-page: #f5f7fa;
    --color-surface-primary: #ffffff;
    --color-surface-subtle: #eef2f7;

    --color-border-subtle: rgba(23, 32, 51, 0.08);

    --color-accent: #2563eb;
    --color-accent-strong: #1d4ed8;

    /* Typography foundation */
    --font-family-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-size-body: 1rem;
    --font-size-heading-primary: 1.25rem;
    --line-height-body: 1.6;
    --line-height-heading: 1.08;

    /* Spacing foundation */
    --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;

    /* Shape foundation */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;

    /* Elevation foundation */
    --shadow-soft:
        0 1px 2px rgba(23, 32, 51, 0.035),
        0 10px 28px rgba(23, 32, 51, 0.07);

    --shadow-surface:
        0 2px 8px rgba(23, 32, 51, 0.05),
        0 12px 32px rgba(23, 32, 51, 0.055);

    /* Layout foundation */
    --page-gutter: 1rem;
    --site-max-width: 90rem;
    --site-header-height: 4.5rem;
    --content-width: 72rem;
    --reading-width: 44rem;

    /* Interaction foundation */
    --transition-fast: 160ms ease;
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

@media (min-width: 48rem) {
    :root {
        --page-gutter: 2rem;
    }
}

@media (min-width: 75rem) {
    :root {
        --page-gutter: 1rem;
    }
}