/* Site design tokens: every colour, font, type size and spacing value lives here. */
:root {
    --accent-light: #2c5aa0;
    --accent-dark: #8cb4ec;

    --font-body: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    --font-label: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --line-body: 1.8;
    --line-list: 1.6;
    --line-heading: 1.3;
    --measure: 40em;

    --size-name: clamp(2.4rem, 1.8rem + 2.5vw, 3.4rem);
    --size-h2: 1.45rem;
    --size-h3: 1.15rem;
    --size-body: 1rem;
    --size-small: 0.9rem;
    --size-label: 0.75rem;
    --weight-name: 800;
    --weight-heading: 700;
    --weight-body: 400;

    --space-section: 3rem;
    --space-heading: 0.75rem;
    --space-item: 0.35rem;
    --space-contact: 0.75rem;
    --space-row: 1rem;
    --space-badge: 0.05rem 0.45rem;
    --radius-badge: 0.25rem;
    --space-tag: 0.25rem;

    --primary-color: var(--accent-light);
    --sans-serif-font: var(--font-body);
    --serif-font: var(--font-body);
    --code-font: var(--font-label);
}

[data-theme='dark'] {
    --primary-color: var(--accent-dark);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --primary-color: var(--accent-dark);
    }
}