:root {
    --color-bg: #121510;
    --color-surface: #1b2019;
    --color-ink: #e7e2d7;
    --color-muted: #b6b0a2;
    --color-accent: #89a56e;
    --color-accent-2: #a1bb87;
    --color-line: #3b4238;
    --color-input-bg: rgba(19, 23, 17, 0.82);
    --color-button-text: #121a10;
    --bg-grad-start: #1a2018;
    --bg-grad-mid: var(--color-bg);
    --bg-grad-end: #0d100c;
    --hero-grad-1: #283125;
    --hero-grad-2: #161b14;
    --hero-grad-3: #323d2d;
    --texture-line: rgba(137, 165, 110, 0.18);

    --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", serif;
    --font-body: "Instrument Sans", "Avenir Next", "Segoe UI", sans-serif;

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

    --content-wide: min(90rem, 92vw);
    --content-narrow: min(52rem, 90vw);

    --transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] {
    --color-bg: #f3efe7;
    --color-surface: #e9e3d8;
    --color-ink: #21201d;
    --color-muted: #59564f;
    --color-accent: #5f6f4a;
    --color-accent-2: #7d8f63;
    --color-line: #c9c1b4;
    --color-input-bg: rgba(255, 255, 255, 0.35);
    --color-button-text: #f4f2ec;
    --bg-grad-start: #f8f4ee;
    --bg-grad-mid: var(--color-bg);
    --bg-grad-end: #ece6da;
    --hero-grad-1: #dfd8cb;
    --hero-grad-2: #f5f1ea;
    --hero-grad-3: #d7cfbf;
    --texture-line: rgba(95, 111, 74, 0.12);
}

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

html[data-theme="light"] {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: radial-gradient(circle at 10% 0%, var(--bg-grad-start) 0%, var(--bg-grad-mid) 45%, var(--bg-grad-end) 100%);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    transition: background var(--transition-base), color var(--transition-base);
}

body.preloader-active {
    overflow: hidden;
}

a,
button,
input,
textarea,
select,
summary {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--color-ink);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--color-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--space-m);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.06;
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.8rem, 1.15rem + 1.8vw, 3.6rem);
}

h2 {
    font-size: clamp(1.5rem, 1.08rem + 1.25vw, 2.45rem);
}

p {
    margin: 0 0 var(--space-m);
    max-width: 72ch;
    color: var(--color-muted);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

::selection {
    background: color-mix(in srgb, var(--color-accent) 28%, transparent);
    color: var(--color-ink);
}