:root {
        --bg: #faf7f1;
    --bg-soft: #f2ede3;
    --bg-night: #15171c;
    --bg-night-soft: #1e2128;
    --line: rgba(26, 24, 21, 0.12);
    --line-night: rgba(255, 255, 255, 0.1);
    --ink: #1a1815;
    --ink-soft: #4a4640;
    --ink-mute: #807a70;
    --paper: #faf7f1;
    --paper-on-night: #ede6d7;
    --paper-mute: rgba(237, 230, 215, 0.62);
    --accent: #c8965a;
    --accent-deep: #a77437;
    --font-display: "Cormorant Garamond", "PT Serif", Georgia, serif;
    --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --max: 1360px;
    --gutter: clamp(20px, 4.5vw, 72px);
    --hero-h: 100vh;
    --fs-display-1: clamp(48px, 7.2vw, 116px);
    --fs-display-2: clamp(38px, 5.6vw, 80px);
    --fs-h3: clamp(28px, 3vw, 42px);
    --fs-card-title: clamp(23px, 2.1vw, 30px);
    --fs-card-title-s: clamp(19px, 1.5vw, 23px);
    --fs-value-l: clamp(24px, 1.9vw, 34px);
    --fs-value-m: 32px;
    --fs-value-s: 24px;
    --fs-lede: clamp(19px, 1.4vw, 22px);
    --fs-body-l: 17px;
    --fs-body-m: 15px;
    --fs-body-s: 14px;
    --fs-label-l: 12px;
    --fs-label-m: 11px;
    --fs-label-s: 10px;
    --ls-label: 0.16em;
    --fs-action: 12px;
    --ls-action: 0.12em;
}

html[data-tone="neutral"] {
        --bg: #f6f6f5;
    --bg-soft: #ececea;
    --paper: #f6f6f5;
}

html[data-tone="cool"] {
        --bg: #f0f2f5;
    --bg-soft: #e3e7ed;
    --paper: #f0f2f5;
}

html[data-accent="gold"] {
        --accent: #b8943f;
    --accent-deep: #896c26;
}

html[data-accent="copper"] {
        --accent: #b0633e;
    --accent-deep: #7d4628;
}

html[data-accent="ink"] {
        --accent: #2a2a2a;
    --accent-deep: #000;
}

html[data-hero="compact"] {
    --hero-h: 78vh;
}

html[data-hero="compact"] {
    --hero-h: 58vh;
}

@media (max-width: 640px) {
    :root {
            --fs-value-m: 26px;
        --fs-value-s: 20px;
        --fs-lede: 18px;
    }

    html[data-hero="compact"] {
        --hero-h: 100svh;
    }
}

@media (min-width: 961px) {
    html[data-hero="compact"] {
        --hero-h: 696px;
    }
}