/* ———————————————————————————————————————————————————————————————————————————————————————————————————— font-family */
:root {
    --f: 'GeistVF', sans-serif;
    --f-1: 'GeistMonoVF', monospace;
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— font-size */
:root {
    --s: 12px;
    --s-1: 80px;
    --s-2: 15px;
    --s-3: 30px;
}

@media (max-width: 840px) {
    :root {
        --s-1: 70px;
    }
}

@media (max-width: 730px) {
    :root {
        --s-1: 60px;
        --s-3: 22px;
    }
}

@media (max-width: 420px) {
    :root {
        --s-1: 50px;
    }
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— value */
:root {
    --v: 0;
    --v-1: 12px;
    --v-2: 24px;
    --v-4: 32px;
    --v-5: 60px;
    --v-999: 999px;
    --v-buffer: 120px;
    --v-buffer2: 25px;
    --v-320: 320px;
    --v-530: 530px;
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— min + max */
:root {
    --max-1: 730px;
    --max-2: 1280px;
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— transition */
:root {
    --t-a-1: transform;
    --t-a-2: 0.2s;
    --t-a-3: ease-in-out;
    --t-a-4: scale(0.9);
    --t-a1-1: background-color;
    --t-b-2: 0.5s;
    --t-b-3: cubic-bezier(.9,0,.27,1);
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— color */
:root {
    --c-1: #fff;
    --c-2: #1c1c1c;
    --c-3: #f4f4f4;
    --c-3-1: #e4e4e4;
    --heytech-dot-outline: rgba(0, 0, 0, 0.3);
    --submit-outline: rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-1: #000;
        --c-2: #f4f4f4;
        --c-3: #2d2d2d;
        --c-3-1: #3e3e3e;
        --heytech-dot-outline: rgba(255, 255, 255, 0.15);
        --submit-outline: rgba(255, 255, 255, 0.15);
    }
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— spacing */
:root {
    --sp-1: 20vh;
    --sp-2: calc(var(--sp-1) + 5vh);
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— header */
:root {
    --headerSpacing: var(--sp-1);
    --headerEqualizer: calc(var(--headerSpacing) * 2 + 30.97px);
}