/* ==========================================================================
   BRS Connect — Design tokens
   Source unique de vérité : brs-design/tokens.json
   Toute couleur, police, espacement ou rayon utilisé ailleurs dans le site
   doit passer par une variable définie ici.
   ========================================================================== */

:root{

  /* --- Couleurs de marque ------------------------------------------------
     tokens.json > color.brand + color.state
     Le navy est la couleur dominante, le ciel l'accent, et le vert reste
     une touche rare ("jamais un grand aplat").                            */
  --navy:          #2D2E83;
  --navy-dark:     #171844;
  --navy-light:    #8B8CD7;
  --sky:           #36A9E1;
  --sky-hover:     #1E8FC6;
  --sky-dark:      #1C5875;
  --green:         #93BD21;

  /* --- Surfaces et texte ------------------------------------------------- */
  --bg:            #FAFFFD;
  --surface:       #FFFFFF;
  --ink:           #212529;
  --muted:         #5C6B78;
  --line:          #D9E3E8;
  --line-soft:     #E7EEF1;

  /* État d'erreur de formulaire (hors tokens.json, choisi pour rester
     lisible sur fond clair : 5.0:1) */
  --danger:        #C0392B;

  /* Texte posé sur les fonds sombres */
  --on-dark:            #FFFFFF;
  --on-dark-muted:      rgba(255,255,255,.78);
  --on-dark-line:       rgba(255,255,255,.22);

  /* --- Typographie -------------------------------------------------------
     tokens.json > typography.fontFamily                                    */
  --font-head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Échelle fluide : min lisible sur mobile, max maîtrisé sur grand écran */
  --step-h1:   clamp(2rem,   1.30rem + 2.9vw, 3.05rem);
  --step-h2:   clamp(1.55rem, 1.20rem + 1.5vw, 2.15rem);
  --step-h3:   clamp(1.12rem, 1.02rem + 0.4vw, 1.30rem);
  --step-body: 1rem;
  --step-sm:   .88rem;
  --step-xs:   .78rem;

  /* --- Espacement -------------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 88px;

  /* Rythme vertical des sections */
  --section-y: clamp(3.5rem, 2.4rem + 4.5vw, 6rem);

  /* --- Rayons ------------------------------------------------------------
     Le thème d'origine travaille par grandes courbes (jusqu'à 50px sur les
     bandes pleine largeur) : on conserve cette logique.                    */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  18px;
  --radius-lg:  24px;
  --radius-band: 50px;

  /* --- Ombres ------------------------------------------------------------
     tokens.json > shadow.ctaButton                                         */
  --shadow-cta:   0 3px 6px rgba(26,27,76,.10);
  --shadow-card:  0 2px 10px rgba(23,24,68,.05);
  --shadow-panel: 0 20px 40px rgba(23,24,68,.12);
  --shadow-deep:  0 24px 48px rgba(0,0,0,.32);

  /* --- Divers ------------------------------------------------------------ */
  --content-max: 1180px;
  --header-h:    76px;
  --ease:        cubic-bezier(.4,0,.2,1);
  --transition:  .18s var(--ease);
}