:root {
    --color-primary-text: var(--color-darker-gray);
    --color-secondary-text-dark: rgba(0, 0, 0, 0.4);
    --color-secondary-text-light: rgba(255, 255, 255, 0.64);
    --color-secondary-text: var(--color-secondary-text-dark);
    --color-white: #fff;
    --color-lighter-gray: #f6f6f6;
    --color-light-gray: #e6e6e6;
    --color-mid-gray: #ccc;
    --color-dark-gray: #444;
    --color-darker-gray: #15171a;
    --color-black: #000;
    --color-border: rgba(0, 0, 0, 0.08);
    --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    --font-serif: Georgia, serif;
    --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    --gap: clamp(2rem, 1.82vw + 1.27rem, 3.6rem);
    --head-nav-gap: 28px;
    --header-spacing: 80px;
}

:root.has-light-text {
    --color-secondary-text: var(--color-secondary-text-light);
    --color-lighter-gray: rgba(0, 0, 0, 0.1);
    --color-darker-gray: #fff;
    --color-border: rgba(255, 255, 255, 0.2);
}

html {
    font-size: 62.5%;
}

body {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--color-primary-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    height: auto;
}

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

a:hover {
    opacity: 0.8;
}

:is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.2;
    color: var(--color-darker-gray);
    letter-spacing: -0.01em;
}