/* Explain: Base styling, resets, and typography defaults. - */
* {
    box-sizing: border-box;
}

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--secondary-color);
}

::selection {
    background: var(--primary-color);
    color: var(--surface-color);
}

button, a, input, select, textarea {
    font: inherit;
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
}