:root {

    --color-bg: #F3F1EC;
    --color-bg-soft: #E9E6DF;
    --color-surface: #FFFFFF;

    --color-green: #667166;
    --color-green-dark: #3F493D;
    --color-green-deep: #303A32;

    --color-text: #30342F;
    --color-muted: #737970;

    --color-line: rgba(63, 73, 61, .18);

    --font-title: "Lora", serif;
    --font-body: "Inter", sans-serif;

    --container: 1200px;
    --container-wide: 1400px;

    --section-space: clamp(5rem, 9vw, 9rem);

    --transition: .35s ease;
}


/* RESET */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: var(--font-body);

    color: var(--color-text);
    background: var(--color-bg);

    line-height: 1.6;
}

img {
    display: block;

    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

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


/* TYPOGRAPHIE */

h1,
h2,
h3,
h4 {
    margin-top: 0;

    font-family: var(--font-title);

    color: var(--color-green-dark);

    line-height: 1.15;
}

p {
    margin-top: 0;
}


/* ACCESSIBILITÉ */

:focus-visible {
    outline: 2px solid var(--color-green-dark);
    outline-offset: 4px;
}