:root {
    color-scheme: light;

    --red: #C73B44;
    --red-deep: #7F1F29;
    --red-tint: #FBE9EA;
    --red-soft: #F3C4C7;
    --green: #187A5B;
    --green-bg: #DDF1E9;
    --green-text: #14684E;

    --bg: #FFF9F8;
    --card: #FFFDFC;
    --ink: #22100F;
    --mute: #6E5A59;
    --line: #EBD9D8;

    --on-red: #FFF9F8;
    --on-red-soft: #F3C4C7;
    --on-red-line: color-mix(in srgb, var(--on-red) 55%, transparent);
    --field-ink: #22100F;
    --field-mute: #6E5A59;

    --ink-panel: #22100F;
    --on-ink: #FFF9F8;
    --mute-ink: #C9B4B2;
    --line-ink: color-mix(in srgb, var(--on-ink) 18%, transparent);

    --accent-text: var(--red);
    --tint-ink: var(--red-deep);
    --focus: var(--green);

    --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
    --font-sans: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
    --font-display: var(--font-serif);
    --font-body: var(--font-sans);
    --font-outlier: var(--font-sans);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 22px;
    --space-6: 28px;
    --space-7: 40px;
    --space-8: 64px;
    --space-9: 96px;

    --container: 1040px;
    --gutter: 20px;
    --header-h: 64px;
    --panel-w: 244px;

    --text-small: 12.5px;
    --text-meta: 12.5px;
    --text-chip: 12.5px;
    --text-body: 14px;
    --text-lede: 15px;
    --text-reading: 15.5px;
    --text-title: 26px;
    --text-title-lead: 34px;
    --text-section: clamp(32px, 3vw, 42px);
    --text-display: clamp(38px, 6.8vw, 96px);
    --text-stat: 40px;
    --text-subscribe: 32px;

    --radius-small: 6px;
    --radius-card: 22px;
    --radius-block: 28px;
    --radius-pill: 99px;

    --dur: 180ms;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    --z-nav: 100;
    --z-panel: 20;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #150D0E;
        --card: #201415;
        --ink: #F7ECEB;
        --mute: #B79F9E;
        --line: #38252A;
        --red-tint: #2B1618;
        --red-soft: #5A2A2F;
        --on-red-soft: #F3C4C7;
        --green: #5FD1A6;
        --green-bg: #13322A;
        --green-text: #5FD1A6;
        --accent-text: #EF8C92;
        --tint-ink: #EF8C92;
        --focus: #5FD1A6;
        --ink-panel: #0E0809;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #150D0E;
    --card: #201415;
    --ink: #F7ECEB;
    --mute: #B79F9E;
    --line: #38252A;
    --red-tint: #2B1618;
    --red-soft: #5A2A2F;
    --on-red-soft: #F3C4C7;
    --green: #5FD1A6;
    --green-bg: #13322A;
    --green-text: #5FD1A6;
    --accent-text: #EF8C92;
    --tint-ink: #EF8C92;
    --focus: #5FD1A6;
    --ink-panel: #0E0809;
}