/* ════════════════════════════════════════════
   DestockGym — base/variables.css
   Design tokens globaux (équivalent _variables.scss,
   en CSS custom properties : pas de compilation,
   et le responsive se fait en re-déclarant la variable)
════════════════════════════════════════════ */

:root {

    /* ------ couleurs ------ */
    --dg-teal:        #015C7A;
    --dg-teal-light:  #4BA5B9;
    --dg-teal-dark:   #003F55;
    --dg-navy:        #0a141e;
    --dg-dark:        #16191c;
    --dg-cream:       #fbfaf6;
    --dg-orange:      #f0833c;
    --dg-text:        #3d4449;
    --dg-border:      #ebeaea;
    --dg-white:       #ffffff;

    /* ------ familles ------ */
    --dg-font-heading: "Barlow Condensed", sans-serif;
    --dg-font-body:    "Hind", "Roboto", sans-serif;

    /* ------ graisses ------ */
    --dg-light:    300;
    --dg-regular:  400;
    --dg-medium:   500;
    --dg-semibold: 600;
    --dg-bold:     700;
    --dg-heavy:    700;

    /* ------ tailles desktop ------ */
    --dg-h1: 4.0625rem;   /* 65px */
    --dg-h2: 2.8125rem;   /* 45px */
    --dg-h3: 2.25rem;     /* 36px */
    --dg-h4: 1.875rem;    /* 30px */
    --dg-h5: 1.5rem;      /* 24px */
    --dg-h6: 1.25rem;     /* 20px */
    --dg-p:  1.0625rem;   /* 17px */
    --dg-small: 0.875rem; /* 14px */

    /* ------ layout ------ */
    --dg-container: 1440px;
    --dg-gutter: 40px;
    --dg-radius: 8px;
    --dg-radius-pill: 999px;

    /* ------ effets ------ */
    --dg-shadow-card: 0 2px 14px rgba(0, 0, 0, 0.06);
    --dg-shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.10);
    --dg-overlay-dark: rgba(10, 20, 30, 0.55);
}

/* ------ tailles tablette ------ */
@media (max-width: 1024px) {
    :root {
        --dg-h1: 3.25rem;     /* 52px */
        --dg-h2: 2.5625rem;   /* 41px */
        --dg-h3: 2.25rem;     /* 36px */
        --dg-h4: 1.625rem;    /* 26px */
        --dg-h5: 1.375rem;    /* 22px */
        --dg-h6: 1.125rem;    /* 18px */
        --dg-gutter: 24px;
    }
}

/* ------ tailles mobile ------ */
@media (max-width: 767px) {
    :root {
        --dg-h1: 2.5rem;      /* 40px */
        --dg-h2: 2rem;        /* 32px */
        --dg-h3: 1.75rem;     /* 28px */
        --dg-h4: 1.5rem;      /* 24px */
        --dg-h5: 1.25rem;     /* 20px */
        --dg-h6: 1.0625rem;   /* 17px */
        --dg-p:  1rem;        /* 16px */
        --dg-gutter: 20px;
    }
}