/**
 * Roadloisirs — Design Tokens
 *
 * Source : maquettes Figma https://www.figma.com/design/tJcaE86tCbX1ZyUWCNR0YF/
 * Ce fichier est la source de vérité pour toutes les valeurs de design.
 * Toujours utiliser ces variables plutôt que des valeurs en dur.
 */

:root {

  /* ============================================================
     COULEURS
     ============================================================ */

  /* Fonds */
  --rl-blanc:           #fcfcfc;  /* Fond principal, header */
  --rl-blanc-2:         #f0f0f0;  /* Fond barre de navigation */
  --rl-bleu-noir:       #050e1a;  /* Fond footer */

  /* Texte & éléments UI */
  --rl-bleu-fonce:      #071f3b;  /* Couleur principale : texte, icônes, bordures */

  /* Accent */
  --rl-orange:          #f28c31;  /* CTA, logo (valeur à confirmer) */
  --rl-orange-fonce:    #d36a0d;  /* Figma --orange-foncé : hover liens bandeau */

  /* Transparences */
  --rl-bleu-fonce-20:   rgba(7, 31, 59, 0.2);   /* Bordures, overlays légers */
  --rl-bleu-fonce-80:   rgba(7, 31, 59, 0.8);   /* Liens secondaires flyout contact */
  --rl-blanc-60:        rgba(240, 240, 240, 0.6); /* Textes légaux footer */

  /* États interactifs */
  --rl-bleu-fonce-hover:  #0a2d55;  /* Hover sur éléments bleu foncé */
  --rl-orange-hover:      #f28c31;  /* Hover sur CTA orange */


  /* ============================================================
     TYPOGRAPHIE
     ============================================================ */

  --rl-font-primary:    'Montserrat', sans-serif;
  --rl-font-editorial:  'Merriweather', serif;

  /* Échelle typographique — Desktop */
  --rl-text-xs:         0.875rem;  /* 14px — labels secondaires */
  --rl-text-s:          1rem;      /* 16px — corps, liens footer */
  --rl-text-nav:        1.125rem;  /* 18px — items de navigation */
  --rl-text-l:          1.375rem;  /* 22px — texte large (Figma: Desktop/texte L, Mobile/Titre XL) */
  --rl-title-s:         1.125rem;  /* 18px — titres colonnes footer (Merriweather) */
  --rl-title-m:         1.5rem;    /* 24px — titres sections (Merriweather) */
  --rl-title-l:         2rem;      /* 32px — titres de page */
  --rl-title-xl:        2.5rem;    /* 40px — hero titles */
  --rl-title-xxl:       3.125rem;  /* 50px — titre hero slider */

  /* Graisses */
  --rl-weight-medium:    500;
  --rl-weight-semibold:  600;
  --rl-weight-bold:      700;
  --rl-weight-extrabold: 800;

  /* Letter-spacing nav */
  --rl-ls-nav:          -0.02em;  /* -0.36px @ 18px */


  /* ============================================================
     ESPACEMENT
     ============================================================ */

  --rl-space-xs:   0.5rem;   /*  8px */
  --rl-space-s:    1rem;     /* 16px */
  --rl-space-m:    1.5rem;   /* 24px */
  --rl-space-l:    2rem;     /* 32px */
  --rl-space-xl:   3rem;     /* 48px */
  --rl-space-2xl:  4rem;     /* 64px */
  --rl-space-3xl:  5rem;     /* 80px */


  /* ============================================================
     LAYOUT
     ============================================================ */

  --rl-max-width:        1440px;
  --rl-content-padding:  3.25rem;  /* 52px — padding horizontal desktop */
  --rl-border-radius:    2px;      /* Coins légèrement arrondis (boutons, inputs) */


  /* ============================================================
     COMPOSANTS GLOBAUX
     ============================================================ */

  /* Header */
  --rl-banner-height:      56px;
  --rl-header-height:      108px;  /* logo + search + icons */
  --rl-navbar-height:      57px;
  --rl-header-total:       221px;  /* banner + header + navbar */

  /* Header mobile */
  --rl-header-mobile-height: 88px;

  /* Navbar */
  --rl-navbar-bg:          var(--rl-blanc-2);
  --rl-navbar-shadow:      0 4px 4px rgba(0, 0, 0, 0.25);

  /* Footer */
  --rl-footer-bg:          var(--rl-bleu-noir);
  --rl-footer-padding:     var(--rl-space-3xl) var(--rl-space-2xl);
  --rl-footer-gap:         84px;   /* espacement entre colonnes */

  /* Search input */
  --rl-search-width:       416px;
  --rl-search-max-width:   848px;
  --rl-search-border:      1px solid var(--rl-bleu-fonce-20);

}