/* ==========================================================
   Base Styles - Structure
   1) Global Tokens (:root)
   2) Reset + Elements
   3) Global Layout Utilities
   4) Motion Accessibility
   5) Responsive Tokens
   ========================================================== */

/* ==========================================================
   Global Tokens (:root)
   ========================================================== */
:root {
    /* Largeurs */
    --page-max-width: 1600px;

    /* Espaces - Layout */
    --page-gutter: clamp(24px, 4vw, 60px);
    --section-space: clamp(48px, 8vw, 100px);

    /* Espaces - Contenu */
    --title-text-space: 25px;
    --title-subtext-space: 15px;
    --content-space-md: 90px;
    --dark-block-margin: 17px;
    --dark-block-bottom-margin: 11px;
    --dark-block-radius: 20px;
    --dark-section-gap: clamp(14px, 1.8vw, 24px);

    /* Couleurs - Core */
    --bg-light: #f7f7f7;
    --bg-dark: #0e0e0e;
    --grey: #9f9f9f;
    --text-on-light: var(--bg-dark);
    --text-on-dark: var(--bg-light);
    --text-grey: var(--grey);

    /* Couleurs - Semantiques */

    /* Typographie */
    --title-size: clamp(2.75rem, 4.8vw, 3.5rem);
    --body-size: clamp(1rem, 1.25vw, 1.40rem);
    --body-leading: 1.5;
    --text-hint-size: 1rem;
}

/* ==========================================================
   Reset + Elements
   ========================================================== */
* {
    /* Reset */
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    /* Base */
    margin: 0;
    font-family: "Poppins", sans-serif;
    line-height: 1.5;
    color: var(--text-on-light);
    background-color: var(--bg-light);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

p,
h1,
h2,
figure {
    margin: 0;
}

p {
    font-size: var(--body-size);
    line-height: var(--body-leading);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================
   Global Layout Utilities
   ========================================================== */
.site-main {
    width: min(100%, var(--page-max-width));
    margin: 0 auto;
    padding-block: var(--section-space);
}

.site-main > .section-spacing + .section-spacing {
    margin-top: var(--section-space);
}

.page-shell {
    padding-inline: var(--page-gutter);
}

/* Utilitaires */
.section-spacing {
    padding-block: 0;
}

.content-space-md {
    margin-top: var(--content-space-md);
}

.content-after-md {
    margin-bottom: var(--content-space-md);
}

.scroll-reveal-text {
    --text-reveal-progress: 1;
    opacity: var(--text-reveal-progress);
    transform: translate3d(0, calc(24px * (1 - var(--text-reveal-progress))), 0)
        scale(calc(0.985 + (0.015 * var(--text-reveal-progress))));
    filter: blur(calc(5px * (1 - var(--text-reveal-progress))));
    will-change: transform, opacity, filter;
    transition: none;
}

/* ==========================================================
   Motion Accessibility
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal-text {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ==========================================================
   Responsive Tokens
   ========================================================== */
@media (max-width: 640px) {
    :root {
        /* Mobile overrides */
        --page-gutter: 20px;
        --section-space: 70px;
        --title-size: clamp(2rem, 10vw, 2.6rem);
        --title-text-space: 25px;
        --content-space-md: 28px;
        --dark-section-gap: 14px;
    }
}