@layer tokens {
    :root {
        --soil: #241D17;
        --soil-2: #35291F;
        --haze: #EDF0F3;
        --paper: #FFFFFF;
        --sky: #1B5FA6;
        --sky-deep: #123F73;
        --sky-tint: #E4EDF6;
        --wheat: #E9B23C;
        --wheat-tint: #FBF1DC;
        --kalyna: #B3312C;
        --moss: #2E6B52;
        --fog: #6B7480;
        --line: #D8DEE5;

        --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;
        --space-10: 8rem;
        --space-11: 12rem;

        --radius-s: 4px;
        --radius-m: 8px;
        --radius-l: 14px;
        --radius-round: 999px;

        --shadow-1: 0 1px 3px rgb(36 29 23 / 0.10);
        --shadow-2: 0 4px 14px rgb(36 29 23 / 0.12);
        --shadow-3: 0 12px 32px rgb(36 29 23 / 0.16);

        --font-display: "Unbounded", "Arial Black", sans-serif;
        --font-body: "Onest", "Segoe UI", system-ui, sans-serif;
        --font-data: "JetBrains Mono", "Consolas", monospace;

        --size-h1: clamp(2.125rem, 1.55rem + 2.55vw, 4rem);
        --size-h2: clamp(1.625rem, 1.36rem + 1.18vw, 2.5rem);
        --size-h3: clamp(1.25rem, 1.14rem + 0.5vw, 1.625rem);
        --size-body: clamp(1rem, 0.985rem + 0.06vw, 1.0625rem);
        --size-small: 0.875rem;
        --size-micro: 0.78125rem;

        --line-display: 1.15;
        --line-body: 1.6;

        --focus-ring: 3px solid var(--wheat);
        --focus-offset: 2px;

        --page-max-width: 1280px;
        --touch-target: 44px;
        --deck-height: 3.5rem;
    }
}