/* =============================================================
   STENAMED — Design tokens
   Source unique de toute couleur, taille, espacement et ombre.
   AUCUNE valeur en dur ailleurs : si un token manque, on l'ajoute ici.

   Palette dérivée du logo officiel (#058B89 teal, #3B68A2 bleu)
   et de la maquette de référence (nav #295593, footer #1F4066).
   ============================================================= */

:root {
  /* ---- Marque -------------------------------------------------- */
  --c-teal-050: #E6F5F4;
  --c-teal-100: #C2E8E6;
  --c-teal-200: #8FD6D2;
  --c-teal-300: #4FBDB8;
  --c-teal-400: #16A29D;
  --c-teal-500: #058B89;   /* teal du logo — couleur primaire */
  --c-teal-600: #047270;
  --c-teal-700: #035A58;
  --c-teal-800: #024240;

  --c-blue-050: #EEF4FB;
  --c-blue-100: #D6E4F4;
  --c-blue-200: #A9C4E5;
  --c-blue-300: #6E97CC;
  --c-blue-400: #4A79B4;
  --c-blue-500: #3B68A2;   /* bleu du logotype */
  --c-blue-600: #2B5593;   /* barre de navigation */
  --c-blue-700: #1F4066;   /* pied de page */
  --c-blue-800: #14304F;
  --c-blue-900: #0E2338;

  /* ---- Neutres (teintés bleu, jamais gris pur) ------------------ */
  --c-n-000: #FFFFFF;
  --c-n-025: #FAFCFE;
  --c-n-050: #F3F7FB;
  --c-n-100: #E7EEF5;
  --c-n-200: #D3DFEA;
  --c-n-300: #B0C1D2;
  --c-n-400: #8298AE;
  --c-n-500: #5E7288;
  --c-n-600: #445468;
  --c-n-700: #2E3B4B;
  --c-n-800: #1C2632;
  --c-n-900: #111820;

  /* ---- Rôles sémantiques --------------------------------------- */
  /* Le teal du logo (#058B89) ne donne que 4,15:1 avec du blanc : sous le
     seuil AA pour du texte. L'accent d'INTERFACE descend donc d'un cran dans
     la même rampe de marque (5,76:1) — le logo, lui, garde sa teinte exacte,
     et une image n'est pas soumise à ce critère. */
  --primary:        var(--c-teal-600);
  --primary-hover:  var(--c-teal-700);
  --primary-brand:  var(--c-teal-500);   /* teinte exacte du logo, usage décoratif */
  --primary-soft:   var(--c-teal-050);
  --primary-line:   var(--c-teal-200);
  --on-primary:     #FFFFFF;

  --secondary:      var(--c-blue-600);
  --secondary-hover:var(--c-blue-700);
  --secondary-soft: var(--c-blue-050);
  --on-secondary:   #FFFFFF;

  --bg:             var(--c-n-000);
  --bg-alt:         var(--c-n-050);
  --bg-tint:        #EFF7FC;          /* fond des sections claires de la maquette */
  --bg-deep:        var(--c-blue-700);/* bandeaux et pied de page */
  --surface:        var(--c-n-000);
  --surface-alt:    var(--c-n-025);

  --text:           var(--c-n-800);
  --text-strong:    var(--c-blue-800);
  --text-muted:     var(--c-n-500);
  /* ⚠️ `--text-faint` est réservé au DÉCOR : chevrons, séparateurs, icônes
     de champ. Il tient les 3:1 exigés pour un élément non textuel, pas les
     4,5:1 d'un texte. Tout libellé, même minuscule, prend `--text-muted`. */
  --text-faint:     #77899D;
  --on-deep:        #E8F1F9;
  --on-deep-muted:  #A9C0D6;

  --border:         var(--c-n-200);
  --border-soft:    var(--c-n-100);
  --border-strong:  var(--c-n-300);

  /* États — jamais la couleur seule : toujours doublés d'un texte ou d'une icône */
  --success:      #0E7A4F;  --success-soft: #E4F5EC;  --success-line: #BFE6D2;
  --warning:      #92600A;  --warning-soft: #FDF3DF;  --warning-line: #F2DFB0;
  --error:        #B32424;  --error-soft:   #FCEBEB;  --error-line:   #F2C9C9;
  --info:         var(--c-blue-500); --info-soft: var(--c-blue-050); --info-line: var(--c-blue-100);
  --sale:         #B32424;  /* prix barré / remise */

  /* Couleurs de marques tierces : constantes imposées, pas des choix de design.
     Elles restent des tokens pour qu'aucune valeur ne traîne dans un composant. */
  --star:     #E8A23A;   /* étoiles d'avis (le jour où le client en aura) */
  --whatsapp: #1FA855;

  /* ---- Typographie --------------------------------------------- */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:     "Inter", ui-monospace, sans-serif;

  /* Échelle fluide : 6 tailles, pas une de plus. clamp() = pas de media query typographique. */
  --t-xs:   0.75rem;                              /* 12 — légendes, badges */
  --t-sm:   0.875rem;                             /* 14 — texte lisible minimum */
  --t-base: 1rem;                                 /* 16 — corps */
  --t-lg:   clamp(1.125rem, 0.4vw + 1.03rem, 1.3rem);
  --t-xl:   clamp(1.5rem,  1.1vw + 1.24rem, 2.1rem);
  --t-2xl:  clamp(2rem,    3.2vw + 1.25rem, 3.6rem);   /* H1 / hero */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --ls-tight: -0.022em;
  --ls-snug:  -0.012em;
  --ls-wide:  0.02em;
  --ls-caps:  0.09em;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* ---- Espacement : une seule échelle, appliquée sans exception -- */
  --s-1:  0.25rem;   --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;    --s-6:  2rem;     --s-7:  2.5rem;   --s-8: 3rem;
  --s-9:  4rem;      --s-10: 5rem;     --s-11: 6.5rem;   --s-12: 8rem;

  /* Rythme vertical des sections : respire moins sur téléphone */
  --section-y: clamp(var(--s-8), 6vw, var(--s-11));

  /* ---- Grille --------------------------------------------------- */
  --shell:      1280px;   /* largeur max du contenu */
  --shell-wide: 1440px;
  --shell-read: 68ch;     /* colonne de lecture */
  --gutter:     clamp(var(--s-4), 4vw, var(--s-7));
  --gap:        clamp(var(--s-4), 1.6vw, var(--s-5));

  /* ---- Rayons : 3 valeurs -------------------------------------- */
  /* Les petits contrôles carrés (case à cocher, pastille de 20 px) ont
     besoin d'un rayon plus serré que --r-sm, sinon ils paraissent ronds. */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---- Élévation : 3 niveaux ----------------------------------- */
  --e-1: 0 1px 2px rgba(20, 48, 79, .06), 0 1px 3px rgba(20, 48, 79, .05);
  --e-2: 0 4px 12px rgba(20, 48, 79, .07), 0 2px 4px rgba(20, 48, 79, .04);
  --e-3: 0 18px 40px rgba(20, 48, 79, .12), 0 4px 12px rgba(20, 48, 79, .06);

  /* ---- Élément signature ---------------------------------------
     Un seul détail visuel, réutilisé partout : le « filet lumineux »
     teal — une arête de 2-3px qui souligne l'élément actif ou mis en
     avant, et son halo hexagonal repris du logo. Tout le reste est calme.
     ------------------------------------------------------------- */
  --edge:        linear-gradient(90deg, var(--c-teal-500), var(--c-teal-300) 55%, rgba(5,139,137,0));
  --edge-solid:  linear-gradient(90deg, var(--c-teal-500), var(--c-teal-400));
  --halo:        radial-gradient(60% 60% at 50% 40%, rgba(5,139,137,.16), rgba(5,139,137,0) 70%);
  --hex-clip:    polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);

  /* ---- Mouvement ------------------------------------------------ */
  --dur-1: 120ms;   /* retour tactile */
  --dur-2: 220ms;   /* survol, ouverture */
  --dur-3: 420ms;   /* apparition au scroll */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  /* ---- Divers ---------------------------------------------------- */
  --tap: 44px;               /* zone tactile minimale */
  --header-h: 72px;
  --focus: 0 0 0 3px var(--c-teal-100), 0 0 0 5px var(--c-teal-500);
  --z-header: 100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
}

/* Le thème est volontairement clair et unique : une boutique B2B
   consultée en cabinet, sous éclairage néon. Pas de bascule sombre —
   mais on respecte le confort de lecture demandé par le système. */
@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--c-n-600);
    --border:     var(--c-n-300);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}