/**
 * variables.css — La Référence
 * Variables CSS globales : couleurs, typographie, espacements, layout.
 */

:root {

    /* -------------------------
       Couleurs principales
    ------------------------- */
    --color-black:      #060606;   /* Black Metal — texte principal, titres */
    --color-blue:       #0062DD;   /* Blue Ruin — accent secondaire, titres, noms */
    --color-lime:       #CFF500;   /* Liquid Lime — accent principal, CTA, highlights */
    --color-gray-light: #D8D8D8;   /* Silver Medal — fonds de sections, cards */
    --color-bg:         #F5F0EA;   /* Billowy Clouds — fond de page */
    --color-white:      #FFFFFF;   /* Blanc — texte sur fonds sombres */

    /* Palette secondaire */
    --color-gray-dark:  #383838;   /* Lacquered Liquorice */
    --color-silver:     #BFBFBF;   /* Silver */
    --color-blue-dark:  #004BA8;   /* Sea of Tears */
    --color-blue-light: #4296FF;   /* Sky Dancer */
    --color-lime-dark:  #A4C200;   /* Slime */
    --color-lime-light: #E6FF5C;   /* Green Ooze */

    /* -------------------------
       Typographie
    ------------------------- */
    --font-primary:    'Satoshi', sans-serif;          /* Titres, gros textes */
    --font-secondary:  'Instrument Sans', sans-serif;  /* Corps, UI, boutons */

    /* Graisses Satoshi */
    --font-weight-black:  900;   /* Gros titres de section */
    --font-weight-medium: 500;   /* Sous-titres, accroches */
    --font-weight-light:  300;   /* Titres légers — Satoshi Light */

    /* Graisses Instrument Sans */
    --font-weight-bold:     700;   /* Bold */
    --font-weight-semibold: 600;   /* Boutons, labels */
    --font-weight-regular:  400;   /* Corps */

    /* Tailles de police — mobile-first */
   --font-size-sm:   14px;
   --font-size-base: 16px;
   --font-size-lg:   18px;
   --font-size-xl:   20px;
   --font-size-2xl:  24px;
   --font-size-3xl:  32px;
   --font-size-4xl:  40px;
   --font-size-5xl:  clamp(2.5rem, 3vw, 3rem);
   --font-size-6xl: clamp(3.5rem, 3.5vw, 4rem);
   --font-size-7xl: clamp(4rem, 5vw, 6rem);
   --font-size-8xl: clamp(5rem, 6vw, 7rem);
   --font-size-10xl: clamp(6rem, 6vw, 8rem);
   --font-size-11xl: clamp(6rem, 6vw, 9rem);


   --line-height-tight:  1;
   --line-height-snug:   1.2;
   --line-height-normal: 1.5;
   --line-height-loose:  1.75;

/* -------------------------
   Espacements
    ------------------------- */
   --space-xs:  8px;
   --space-sm:  16px;
   --space-md:  32px;
   --space-lg:  48px;
   --space-xl:  64px;
   --space-2xl: 96px;


    /* Padding sections */
   --section-padding-y: 64px;
   --section-padding: 50px;

   --section-padding-x: 24px;
   --section-padding-xl : 96px;
   --section-padding-x-xl: 150px;
   --section-padding-x-2xl: 400px;

    /* -------------------------
       Layout
    ------------------------- */
    --container-max:     1280px;
    --container-padding: 24px;
    --container-max-width: 1200px;
    --container-max-width-xl: 1400px;


    /* -------------------------
       Bordures & rayons
    ------------------------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* -------------------------
       Ombres
    ------------------------- */
    --shadow-sm: 0 1px 3px rgba(6, 6, 6, 0.08);
    --shadow-md: 0 4px 16px rgba(6, 6, 6, 0.10);
    --shadow-lg: 0 8px 32px rgba(6, 6, 6, 0.12);

    /* -------------------------
       Transitions
    ------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* -------------------------
       Z-index
    ------------------------- */
    --z-shape:   0;
    --z-base:    1;
    --z-above:   10;
    --z-overlay: 100;
    --z-modal:   1000;
}

@media (min-width: 768px) {
    :root {
        --section-padding-y:  96px;
        --section-padding-x:  32px;
        --container-padding:  24px;
    }
}

@media (min-width: 1024px) {
    :root {
        --section-padding-y:  40px;
        --section-padding-x:  40px;
        --container-padding:  24px;
    }
}