@layer tokens {
    :root {
        color-scheme: light;

        /* The 2014 palette, carried forward verbatim from the legacy main.css. */
        --accent: #366d74;
        --action: #6b9ea4;
        --action-hover: #4682b4;

        --ink: #222;
        --ink-strong: #504949;
        --ink-muted: #696969;
        --ink-faint: #999;

        --surface: #fff;
        --surface-sunken: #ececec;
        --backdrop: rgb(236 236 236 / 0.95);
        --rule: #d8d8d8;

        --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        --font-display: 'Outfit', 'Century Gothic', 'URW Gothic', system-ui, sans-serif;
        --font-accent: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

        --weight-body: 400;
        --weight-strong: 600;
        --weight-accent: 500;

        --step--1: clamp(0.833rem, 0.81rem + 0.12vw, 0.9rem);
        --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
        --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
        --step-2: clamp(1.44rem, 1.32rem + 0.58vw, 1.75rem);
        --step-3: clamp(1.728rem, 1.55rem + 0.90vw, 2.188rem);
        --step-4: clamp(2.074rem, 1.80rem + 1.36vw, 2.734rem);
        --step-5: clamp(2.488rem, 2.08rem + 2.03vw, 3.418rem);

        --lh-body: 1.65;
        --lh-tight: 1.15;
        --measure: 62ch;
        --tracking-display: 0.02em;

        --container: 72rem;
        --header-height: 4rem;
        --cols: 1;

        --space-3xs: 0.25rem;
        --space-2xs: 0.5rem;
        --space-xs: 0.75rem;
        --space-s: 1rem;
        --space-m: 1.5rem;
        --space-l: 2.5rem;
        --space-xl: 4rem;
        --space-2xl: 6rem;

        --focus-ring-width: 3px;
        --focus-ring-color: var(--action-hover);
        --focus-ring-offset: 2px;

        --radius: 4px;
        --transition: 200ms ease;
    }

    /* The ramp's lighter greys fall below 4.5:1 on white. */
    @media (prefers-contrast: more) {
        :root {
            --ink-muted: #3a3a3a;
            --ink-faint: #4a4a4a;
            --rule: #767676;
            --focus-ring-width: 4px;
        }
    }

    @media (prefers-reduced-transparency: reduce) {
        :root {
            --backdrop: #ececec;
        }
    }
}