/* =============================================
   Base / Typographie
   ============================================= */
body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--color-gray-lighter);
    background-color: var(--color-black);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-white);
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p {
    margin-bottom: var(--space-md);
    color: var(--color-gray-lighter);
}

a {
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent);
}

strong {
    font-weight: var(--fw-semibold);
    color: var(--color-white);
}

/* Selection */
::selection {
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* Scrollbar personnalisee */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray);
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--wide {
    max-width: 1440px;
}

.container--narrow {
    max-width: 800px;
}