:root {

    /* ==========================================================
       COLORS
       ========================================================== */
    --ml-color-orange: #ff7c10;
    --ml-color-navy: #012c4a;
    --ml-color-teal: #009ea1;
    --ml-color-yellow: #f9dd84;
    --ml-color-cream: #f8f4e7;
  
    --ml-color-grey-light: #f2f2f2;

    --ml-color-text: #111111;
    --ml-color-text-soft: #3e3e3e;
    --ml-color-white: #ffffff;
    --ml-color-black: #000000;
    --ml-color-border: rgba(1, 44, 74, 0.12);
  
    /* ==========================================================
       FONTS
       ========================================================== */
    --ml-font-display: "Bowlby One", sans-serif;
    --ml-font-body: "Raleway", sans-serif;
  
    /* ==========================================================
       FONT WEIGHTS
       ========================================================== */
    --ml-fw-regular: 400;
    --ml-fw-medium: 500;
    --ml-fw-semibold: 600;
    --ml-fw-bold: 700;
    --ml-fw-extrabold: 900;
  
    /* ==========================================================
       FONT SIZES
       ========================================================== */
    --ml-fs-hero: clamp(38px, 5vw, 72px);
    --ml-fs-h1: clamp(32px, 4vw, 54px);
    --ml-fs-h2: clamp(28px, 3.2vw, 44px);
    --ml-fs-h3: clamp(18px, 1.7vw, 24px);
    --ml-fs-h4: clamp(17px, 1.4vw, 20px);
    --ml-fs-body: 16px;
    --ml-fs-body-lg: 18px;
    --ml-fs-small: 15px;
    --ml-fs-xs: 13px;
  
    /* ==========================================================
       LINE HEIGHTS
       ========================================================== */
    --ml-lh-tight: 1.05;
    --ml-lh-heading: 1.12;
    --ml-lh-subheading: 1.2;
    --ml-lh-body: 1.5;
    --ml-lh-list: 1.45;
  
    /* ==========================================================
       SPACING SCALE
       Base simple mais solide
       ========================================================== */
    --ml-space-0: 0;
    --ml-space-1: 4px;
    --ml-space-2: 8px;
    --ml-space-3: 12px;
    --ml-space-4: 16px;
    --ml-space-5: 24px;
    --ml-space-6: 32px;
    --ml-space-7: 40px;
    --ml-space-8: 48px;
    --ml-space-9: 64px;
    --ml-space-10: 80px;
    --ml-space-11: 96px;
  
    /* ==========================================================
       SECTION SPACING
       Rythme vertical principal du site
       ========================================================== */
    --ml-section-py-desktop: 50px;
    --ml-section-py-tablet: 40px;
    --ml-section-py-mobile: 30px;
  
    /* ==========================================================
       LAYOUT
       Important : doit matcher le header custom
       ========================================================== */
    --ml-container: 1260px;
    --ml-container-wide: 1380px;
    --ml-container-narrow: 980px;
    --ml-container-padding-inline-desktop: 20px;
    --ml-container-padding-inline-mobile: 12px;
  
    --ml-grid-gap: 24px;
    --ml-row-gap: 32px;
  
    /* ==========================================================
       RADIUS
       ========================================================== */
    --ml-radius-sm: 10px;
    --ml-radius-md: 15px;
    --ml-radius-lg: 20px;
    --ml-radius-xl: 28px;
    --ml-radius-pill: 999px;
  
    /* ==========================================================
       SHADOWS
       ========================================================== */
    --ml-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);
    --ml-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.12);
    --ml-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
  
    /* ==========================================================
       TRANSITIONS
       ========================================================== */
    --ml-transition-fast: 0.2s ease;
    --ml-transition-base: 0.3s ease;
  }