/*
Theme Name: Sodex Industrie Energie
*/
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

:root {
    /* Colors */
    --color-primary: #2929a9;
    --color-secondary: #212121;
    --color-tertiary: #dbdbdb;
    --color-quaternary: #ffffff;

    --color-primary-rgb-raw: 41, 41, 169;
    --color-secondary-rgb-raw: 33, 33, 33;
    --color-tertiary-rgb-raw: 219, 219, 219;
    --color-quaternary-rgb-raw: 255, 255, 255;

    --color-gradient: radial-gradient(
        circle,
        rgba(var(--color-primary-rgb-raw), 0.3),
        rgba(var(--color-quaternary-rgb-raw), 0.25)
    );

    --color-primary-hover: color-mix(in oklab, var(--color-primary) 88%, black);
    --color-tertiary-hover: color-mix(
        in oklab,
        var(--color-tertiary) 88%,
        black
    );
    --text-on-primary: #ffffff;
    --text-on-light: var(--color-secondary);

    /* Spacing */
    --spacing-2xs: 8px;
    --spacing-xs: 12px;
    --spacing-s: 16px;
    --spacing-m: 20px;
    --spacing-l: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 64px;
    --spacing-3xl: 80px;

    --round-sm: 8px;
    --round-md: 12px;
    --round-lg: 16px;

    /* Heading */
    --heading-size-1: 40px;
    --heading-line-1: 42px;

    --heading-size-2: 36px;
    --heading-line-2: 38px;

    --heading-size-3: 28px;
    --heading-line-3: 32px;

    --heading-size-4: 20px;
    --heading-line-4: 24px;

    --paragraph-size: 16px;
    --paragraph-line: 22px;

    --font-family:
        "Space Grotesk", "Inter", "Rubik", "Barlow", "IBM Plex Sans",
        "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Reset */
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-line);
    color: var(--text-on-light);
    background: var(--color-quaternary);

    padding: 10px clamp(50px, 10vw, 300px);
}

main {
    padding-top: var(--spacing-m);
}

@media (max-width: 1200px) {
    body {
        padding: 10px clamp(20px, 3vw, 300px);
    }
}

h1 {
    font-size: var(--heading-size-1);
    line-height: var(--heading-line-1);
}
h2 {
    font-size: var(--heading-size-2);
    line-height: var(--heading-line-2);
}
h3 {
    font-size: var(--heading-size-3);
    line-height: var(--heading-line-3);
}
h4 {
    font-size: var(--heading-size-4);
    line-height: var(--heading-line-4);
}
p {
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-line);
}

p {
    white-space: pre-line;
}

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

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

ul {
    list-style: none;
}

.site-logo {
    max-width: 200px;
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 25px;
}

input {
    background: var(--color-quaternary);
}

input::placeholder {
    color: var(--color-secondary);
}

input::placeholder, textaera::placeholder, textarea {
    font-family: var(--font-family);
}