/* ==========================================================================
   Identité visuelle OBT Agency pour l'application de gestion.
   Extrait de css/tokens.css du site de l'agence (06-MARQUE OBT / 05-Site OBT),
   la source de vérité de la charte (02-Charte / OBT_Identite_visuelle_VF.docx).
   Les noms et les valeurs sont ceux de la charte. On n'en invente pas :
   si une valeur change, elle change d'abord dans le fichier du site.
   Aucune couleur, taille de police ou espacement n'est écrit en dur ailleurs.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/brand/fonts/InterVariable.woff2") format("woff2-variations"),
       url("/brand/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonds */
  --c-bg:              #FFFFFF;
  --c-bg-panel:        #F6F7F9;
  --c-bg-elevated:     #EEF0F3;

  /* Textes */
  --c-text:            #12151A;
  --c-text-muted:      #545B64;
  --c-text-faint:      #5F6670;
  --c-text-on-accent:  #FFFFFF;

  /* Accents */
  --c-accent:          #2558D6;
  --c-accent-bright:   #3D8BFF;
  --c-accent-light:    #7FD1FF;
  --c-accent-deep:     #2558D6;
  --c-accent-a04:      rgba(37, 88, 214, .04);
  --c-accent-a08:      rgba(37, 88, 214, .08);
  --c-accent-a12:      rgba(37, 88, 214, .12);
  --c-accent-a16:      rgba(37, 88, 214, .16);
  --c-accent-a18:      rgba(37, 88, 214, .18);

  /* Bordures et surfaces */
  --c-surface:         rgba(18, 21, 26, .035);
  --c-surface-strong:  rgba(18, 21, 26, .06);
  --c-border:          rgba(18, 21, 26, .10);
  --c-border-strong:   rgba(18, 21, 26, .18);

  /* Couleurs d'état : hors palette de marque, réservées aux messages système */
  --c-ok:     #2E9E63;
  --c-alert:  #D9534F;
  --c-ok-a12:    rgba(46, 158, 99, .12);
  --c-alert-a12: rgba(217, 83, 79, .12);
  --c-alert-a24: rgba(217, 83, 79, .24);

  /* Halos de la marque */
  --blob-bright: radial-gradient(circle at 50% 50%,
      rgba(61, 139, 255, .90) 0%,  rgba(61, 139, 255, .58) 22%,
      rgba(61, 139, 255, .30) 42%, rgba(61, 139, 255, .13) 62%,
      rgba(61, 139, 255, .04) 80%, rgba(61, 139, 255, 0) 100%);
  --blob-light: radial-gradient(circle at 50% 50%,
      rgba(127, 209, 255, .90) 0%,  rgba(127, 209, 255, .58) 22%,
      rgba(127, 209, 255, .30) 42%, rgba(127, 209, 255, .13) 62%,
      rgba(127, 209, 255, .04) 80%, rgba(127, 209, 255, 0) 100%);

  /* Ombres */
  --shadow-glow:       0 8px 36px -14px rgba(47, 107, 255, .35);
  --shadow-soft:       0 20px 50px -22px rgba(18, 23, 31, .16);
  --c-overlay:         rgba(18, 21, 26, .55);

  /* Typographie : Inter seule, graisses 400, 500, 600, 700 */
  --font-base: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-2xs:  0.75rem;
  --fs-xs:   0.875rem;
  --fs-sm:   1rem;
  --fs-md:   1.25rem;
  --fs-lg:   1.5625rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.5rem;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --h1-lh: 1.04;
  --h1-ls: -0.02em;
  --h2-lh: 1.1;
  --h2-ls: -0.02em;
  --h3-lh: 1.25;
  --h3-ls: -0.01em;
  --body-lh: 1.5;
  --eyebrow-ls: 0.12em;

  /* Espacements, base 4 px */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-24:  6rem;

  /* Rayons */
  --radius-sm:    10px;
  --radius-md:    20px;
  --radius-lg:    32px;
  --radius-pill:  999px;

  /* Navigation en pilule */
  --nav-track-bg:       var(--c-bg-elevated);
  --nav-track-border:   var(--c-border);
  --nav-active-bg:      var(--c-bg);
  --nav-active-shadow:  0 2px 10px -4px rgba(18, 23, 31, .35);
  --nav-hover-bg:       var(--c-surface-strong);

  /* Logo : le fichier est au ratio 4:1, seule la hauteur est fixée */
  --logo-height: 26px;
}