:root {
    color-scheme: light;

    --background: #f3f2ee;
    --surface: #faf9f6;
    --surface-secondary: #e9e7e2;

    --text: #171717;
    --muted: #66635f;

    --border: rgba(23, 23, 23, 0.14);
    --border-strong: rgba(23, 23, 23, 0.28);

    --accent: #ef6435;
    --accent-contrast: #ffffff;

    --button-background: #171717;
    --button-text: #faf9f6;

    --page-width: 1500px;
    --page-padding: clamp(24px, 4vw, 64px);
}

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

    --background: #413f41;
    --surface: #4a484a;
    --surface-secondary: #535153;

    --text: #f6f3ee;
    --muted: #cbc6c0;

    --border: rgba(255, 255, 255, 0.16);
    --border-strong: rgba(255, 255, 255, 0.3);

    --accent: #61d889;
    --accent-contrast: #ffffff;

    --button-background: #6d9a7c;
    --button-text: #ffffff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--background);
}

body {
    margin: 0;
    overflow-x: hidden;

    background: var(--background);
    color: var(--text);

    font-family: "Inter", sans-serif;
    text-rendering: optimizeLegibility;

    transition:
        background-color 280ms ease,
        color 280ms ease;
}

body,
button,
a {
    cursor: none;
}

img {
    display: block;
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    color: inherit;
    font: inherit;
}

h1,
h2,
h3,
p,
ul {
    margin-top: 0;
}

ul {
    padding: 0;
}

::selection {
    background: var(--accent);
    color: var(--accent-contrast);
}