/*
  Legacy bridge — restitue les variables CSS et le comportement responsive
  qu'exposait l'ancien `root.css` SCSS-based, par-dessus le `root.css` issu
  des Design Tokens.

  Ordre d'import recommandé côté consommateur :
    1. dist/<marque>/styles/fonts.css
    2. dist/<marque>/styles/css/root.css         (design tokens)
    3. dist/<marque>/styles/css/legacy-bridge.css (ce fichier)
*/

:root {
  /* Breakpoints */
  --breakpoint-xxs: 360px;
  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  /* Spinner */
  --spinner-animation-duration: 0.75s;
  --spinner-animation-timing: linear;
  /* Header (mobile-first ; bascule tablette/desktop plus bas) */
  --mobile-header-height: 110px;
  --header-height: var(--mobile-header-height);
  /* Container responsive (mobile-first ; bascule au breakpoint correspondant) */
  --container-horizontal-spacing: var(--spacing-3);
  --container-max-width: var(--container-max-width-xxs);
  /* Shadows — couleurs alignées sur la marque via color-mix */
  --shadow: 0.1rem 0.1rem 0.3rem -0.1rem
    color-mix(in srgb, var(--color-background-darkest) 20%, transparent);
  --shadow-dark: 0.2rem 0.4rem 0.8rem 0.4rem
    color-mix(in srgb, var(--color-background-darkest) 15%, transparent);
  --shadow-light: 0 0 3rem 0
    color-mix(in srgb, var(--color-background-darkest) 16%, transparent);
  --shadow-main: 0.1rem 0.1rem 0.3rem -0.1rem
    color-mix(in srgb, var(--color-main) 20%, transparent);
  --shadow-main-dark: 0.1rem 0.2rem 1.6rem 0.4rem
    color-mix(in srgb, var(--color-main) 30%, transparent);
  --shadow-main-light: 0 0 3rem 0
    color-mix(in srgb, var(--color-main) 16%, transparent);
  /* Alias / variables divers présents en v1 */
  --block-title-background: var(--color-block-title-background, var(--color-main));
  --border-gradient: var(--color-success-darker), var(--color-success);
  --gradient-green-start: #004d3f;
  --gradient-green-end: #00826b;
  /* IDF — famille typographique */
  --idf-font-family-primary: var(--font-family), helvetica, arial, sans-serif;
  /* IDF — typographie (mobile-first ; bascule desktop plus bas) */
  --idf-font-size-xxxl: var(--font-size-3xl-mobile);
  --idf-font-size-xxl: var(--font-size-xxl-mobile);
  --idf-font-size-xl: var(--font-size-xl);
  --idf-font-size-l: var(--font-size-l);
  --idf-font-size-m: var(--font-size-m);
  --idf-font-size-s: var(--font-size-s);
  --idf-font-size-xs: var(--font-size-xs);
  --idf-line-height-xxxl: var(--line-height-3xl-mobile);
  --idf-line-height-xxl: var(--line-height-xxl-mobile);
  --idf-line-height-xl: var(--line-height-xl);
  --idf-line-height-l: var(--line-height-l);
  --idf-line-height-m: var(--line-height-m);
  --idf-line-height-s: var(--line-height-s);
  --idf-line-height-xs: var(--line-height-xs);
  --idf-icon-size-xxxl: var(--icon-size-3xl-mobile);
  --idf-icon-size-xxl: var(--icon-size-xxl-mobile);
  --idf-icon-size-xl: var(--icon-size-xl);
  --idf-icon-size-l: var(--icon-size-l);
  --idf-icon-size-m: var(--icon-size-m);
  --idf-icon-size-s: var(--icon-size-s);
  --idf-icon-size-xs: var(--icon-size-xs);
}
/*
  v1 émettait les valeurs mobiles dans :root puis basculait sur les valeurs
  desktop à >=992px. v2 expose la valeur desktop dans le token principal et
  la valeur mobile dans `*-mobile`. On restitue la bascule mobile-first ici.
*/
@media (width <= 991.98px) {
  :root {
    --font-size-3xl: var(--font-size-3xl-mobile);
    --font-size-xxl: var(--font-size-xxl-mobile);
    --line-height-3xl: var(--line-height-3xl-mobile);
    --line-height-xxl: var(--line-height-xxl-mobile);
    --icon-size-3xl: var(--icon-size-3xl-mobile);
    --icon-size-xxl: var(--icon-size-xxl-mobile);
  }
}

@media (width >= 576px) {
  :root {
    --container-max-width: var(--container-max-width-sm);
    --header-height: 112px;
  }
}

@media (width >= 768px) {
  :root {
    --container-max-width: var(--container-max-width-md);
  }
}

@media (width >= 992px) {
  :root {
    --container-horizontal-spacing: var(--spacing-4);
    --container-max-width: var(--container-max-width-lg);
    --header-height: 122px;
    --idf-font-size-xxxl: var(--font-size-3xl);
    --idf-font-size-xxl: var(--font-size-xxl);
    --idf-icon-size-xxxl: var(--icon-size-3xl);
    --idf-icon-size-xxl: var(--icon-size-xxl);
    --idf-line-height-xxxl: var(--line-height-3xl);
    --idf-line-height-xxl: var(--line-height-xxl);
  }
}

@media (width >= 1200px) {
  :root {
    --container-max-width: var(--container-max-width-xl);
  }
}