/* ============================================================
   tokens.css : design system de creawebstudio.com
   Toutes les valeurs de design vivent ici, sous forme de
   variables CSS. Ne jamais coder une couleur ou un espacement
   en dur dans les autres feuilles.
   ============================================================ */

:root {

    /* --------------------------------------------------------
       Couleurs
       Règle WCAG : --couleur-accent (#8DC63F) ne passe pas AA
       sur blanc pour du texte (ratio 2,1:1). Pour les liens et
       textes verts, utiliser --couleur-accent-texte (5,1:1).
       Sur fond accent, texte en --couleur-titre (7,9:1).
       -------------------------------------------------------- */
    --couleur-texte: #3A3A3A;          /* anthracite, texte courant */
    --couleur-texte-doux: #6B6B6B;     /* texte secondaire (4,5:1 sur blanc) */
    --couleur-titre: #222222;          /* titres et texte sur fond accent */
    --couleur-fond: #FFFFFF;           /* fond dominant */
    --couleur-fond-doux: #F7F8F6;      /* sections alternées, cartes */
    --couleur-bordure: #E6E8E3;        /* filets discrets */
    --couleur-accent: #8DC63F;         /* accent visuel : boutons, icônes, soulignements */
    --couleur-accent-texte: #4E7A1E;   /* liens et textes verts, AA sur blanc */
    --couleur-accent-fonce: #79AC32;   /* hover des boutons accent */

    /* --------------------------------------------------------
       Typographie
       Display auto-hébergée pour les titres, stack système
       pour le corps de texte (zéro téléchargement).
       -------------------------------------------------------- */
    --fonte-display: 'Clash Display', system-ui, sans-serif;
    --fonte-corps: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Échelle fluide : mobile first, grandit avec le viewport */
    --texte-petit: 0.875rem;                            /* 14px */
    --texte-base: 1rem;                                 /* 16px */
    --texte-grand: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --titre-petit: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --titre-moyen: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
    --titre-grand: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
    --titre-hero: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);

    --interlignage-titre: 1.15;
    --interlignage-corps: 1.65;

    /* --------------------------------------------------------
       Espacements (échelle de base 4px)
       -------------------------------------------------------- */
    --espace-2xs: 0.25rem;   /*  4px */
    --espace-xs: 0.5rem;     /*  8px */
    --espace-s: 0.75rem;     /* 12px */
    --espace-m: 1rem;        /* 16px */
    --espace-l: 1.5rem;      /* 24px */
    --espace-xl: 2rem;       /* 32px */
    --espace-2xl: 3rem;      /* 48px */
    --espace-3xl: 4rem;      /* 64px */
    /* Respiration verticale des sections, fluide */
    --espace-section: clamp(4rem, 3rem + 4vw, 7rem);

    /* --------------------------------------------------------
       Mise en page
       -------------------------------------------------------- */
    --largeur-contenu: 72rem;     /* 1152px */
    --largeur-texte: 42rem;       /* paragraphes confortables */
    --gouttiere: clamp(1.25rem, 4vw, 2.5rem);

    /* --------------------------------------------------------
       Rayons, ombres, transitions
       -------------------------------------------------------- */
    --rayon-s: 6px;
    --rayon-m: 10px;
    --rayon-pilule: 999px;

    /* Ombres très légères, cohérentes avec le minimalisme */
    --ombre-douce: 0 1px 3px rgba(34, 34, 34, 0.06);
    --ombre-carte: 0 6px 24px rgba(34, 34, 34, 0.07);

    --transition-rapide: 160ms ease;
    --transition-douce: 280ms ease;
}