* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 8.7em;
}

body {
    --color-primary: #ffffff;
    --color-dark: #000000;
    --color-neutral: #0d3951;
    --color-accent-primary: #8bcbbd;
    --color-accent-secondary: #ebdac4;

    /* font-size */
    --font-size-title-page: clamp(3.129rem, calc(8.5vw + 1rem), 4.162rem);
    --font-size-title-section: clamp(2.353rem, calc(6vw + 1rem), 3.129rem);
    --font-size-title-card: clamp(1.769rem, calc(5vw + 1rem), 2.353rem);
    --font-size-title-paragraph: clamp(1.33rem, calc(3vw + 1rem), 1.769rem);

    /* font-weight */
    --font-weight-regular: 400;
    --font-weight-bold: 600;

    /* text */
    font-family: 'Geomanist', sans-serif;
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    letter-spacing: 0.06em;
    word-spacing: 0.16em;

    /* spacing */
    --spacing-xl: 5rem;
    --spacing-l: 4rem;
    --spacing-m: 2rem;
    --spacing-s: 1rem;
    --spacing-xs: 0.5rem;

    /* border */
    --radius: 15px;
    --child-radius: calc(var(--radius) / 2);
}

/* ====================================================== COLORS ====================================================== */
.neutral,
.accent-primary,
.accent-secondary {

    @supports (color: color-mix(in hsl, white, black)) {
        --dark-2: color-mix(in hsl, var(--place-holder) 80%, black 20%);
        --dark-1: color-mix(in hsl, var(--place-holder) 90%, black 10%);
        --color: color-mix(in hsl, var(--place-holder) 100%, white 0%);
        --light-1: color-mix(in hsl, var(--place-holder) 100%, white 2%);
        --light-2: color-mix(in hsl, var(--place-holder) 100%, white 7%);
    }

    @supports (color: oklch(50% 0.1 120)) {
        --dark-2: oklch(from var(--place-holder) calc(l - 0.10) calc(c + 0.02) h);
        --dark-1: oklch(from var(--place-holder) calc(l - 0.04) calc(c + 0.01) h);
        --color: oklch(from var(--place-holder) l c h);
        --light-1: oklch(from var(--place-holder) calc(l + 0.02) calc(c + 0.01) h);
        --light-2: oklch(from var(--place-holder) calc(l + 0.04) calc(c + 0.02) h);
    }
}

.neutral {
    --place-holder: var(--color-neutral);
}

.accent-primary {
    --place-holder: var(--color-accent-primary);
}

.accent-secondary {
    --place-holder: var(--color-accent-secondary);
}

/* ====================================================== FONTS ====================================================== */
@font-face {
    font-family: 'Geomanist';
    src: url('/fonts/geomanist-regular.woff2') format('woff2'),
        url('/fonts/hinted-Geomanist-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('/fonts/geomanist-bold-webfont.29a44a.woff2') format('woff2'),
        url('/fonts/hinted-Geomanist-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('/fonts/geomanist-regular-italic-webfont.woff2') format('woff2'),
        url('/fonts/geomanist-regular-italic-webfont.woff') format('woff');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

h1 {
    font-size: var(--font-size-title-page);
    font-weight: var(--font-weight-regular);
    font-style: italic;
}

h2 {
    font-size: var(--font-size-title-section);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: var(--font-size-title-card);
    font-weight: var(--font-weight-regular);
}

h4 {
    font-size: var(--font-size-title-paragraph);
    font-weight: var(--font-weight-bold);
    font-style: italic;
}