/* ============================================================
   gestoapp — Design tokens v2.0 (juillet 2026)
   Référence complète : identite/design-system.html
   Webfonts à charger : Unbounded (500,600,700), Figtree (400,500,600),
   JetBrains Mono (400,600) — Google Fonts.
   ============================================================ */

:root {
  /* ---- Marque : Violet Gesto ---- */
  --gesto-violet-50:  #F5F1FC;
  --gesto-violet-100: #EAE1F9;
  --gesto-violet-200: #D4C3F2;
  --gesto-violet-300: #B69AE8;
  --gesto-violet-400: #9A7BE0; /* accent sur fond sombre */
  --gesto-violet-500: #7B4FD0; /* teinte de référence */
  --gesto-violet-600: #6640BA; /* boutons au repos */
  --gesto-violet-700: #5333A0;
  --gesto-violet-800: #422881;
  --gesto-violet-900: #331F63;

  /* ---- Neutres à biais violet ---- */
  --gesto-neutral-0:   #FFFFFF;
  --gesto-neutral-50:  #FAF8FC; /* papier */
  --gesto-neutral-100: #F1EDF8;
  --gesto-neutral-200: #E7E2F0; /* bordures */
  --gesto-neutral-300: #D9D2E6; /* anneau d'orbite */
  --gesto-neutral-400: #B3ABC4;
  --gesto-neutral-500: #8C84A0;
  --gesto-neutral-600: #6B6280; /* texte secondaire */
  --gesto-neutral-700: #4C4460;
  --gesto-neutral-800: #342D47;
  --gesto-neutral-900: #1D1826; /* encre */
  --gesto-neutral-950: #0F0B17;

  /* ---- Couleurs de secteur (satellites) — palette v2.1 (2026-07-12) ----
     hopital rouge · ecole bleu · gare variante bleu ciel · transport gris ·
     boutik jaune · hotel marron. */
  --sector-hopital:   #E05A4E;  --sector-hopital-soft:   #FBEAE8;
  --sector-ecole:     #2E7DE8;  --sector-ecole-soft:     #E4EEFC;
  --sector-hotel:     #96613C;  --sector-hotel-soft:     #F4EAE2;
  --sector-gare:      #2AA6CB;  --sector-gare-soft:      #E2F3F8;
  --sector-transport: #6E7686;  --sector-transport-soft: #ECEBF0;
  --sector-boutik:    #CFA015;  --sector-boutik-soft:    #FBF3DA;

  /* Aplats de secteur : teinte de la même famille, éclaircie/désaturée pour porter
     du texte ENCRE. Les couleurs pleines ne portent JAMAIS de blanc (boutik tombe
     à 2,3). L'encre tient sur les six aplats : plancher hopital 4,62 > seuil AA 4,5. */
  --sector-hopital-fill:   #D55F55;
  --sector-ecole-fill:     #4184DD;
  --sector-hotel-fill:     #B27E52;
  --sector-gare-fill:      #3AA4C4;
  --sector-transport-fill: #8B92A1;
  --sector-boutik-fill:    #DCB13C;

  /* ---- Sémantique ---- */
  --ok:   #2F9E63;  --ok-soft:   #E7F5ED;
  --warn: #E19A10;  --warn-soft: #FBF2DC;
  --err:  #CC3D33;  --err-soft:  #FAE7E5;
  --info: #3573D9;  --info-soft: #E7EFFB;

  /* ---- Typographie ---- */
  --font-display: "Unbounded", "Avenir Next", sans-serif;  /* titres + wordmark */
  --font-body:    "Figtree", "Segoe UI", sans-serif;       /* texte & interface */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace; /* montants, données */
  --wordmark-tracking: 0.02em; /* bas-de-casse : tracking resserré */

  /* ---- Rôles (thème clair) ---- */
  --paper: var(--gesto-neutral-50);
  --card:  var(--gesto-neutral-0);
  --ink:   var(--gesto-neutral-900);
  --muted: var(--gesto-neutral-600);
  --line:  var(--gesto-neutral-200);
  --chip:  var(--gesto-neutral-100);
  --brand:        var(--gesto-violet-500);
  --brand-strong: var(--gesto-violet-600);
  --brand-soft:   var(--gesto-violet-50);

  /* ---- Formes & espacement ---- */
  --radius-s: 6px;     /* puces, badges carrés */
  --radius-m: 10px;    /* champs, boutons */
  --radius-l: 16px;    /* cartes, panneaux */
  --radius-pill: 999px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
}

/* ---- Thème sombre ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161120;
    --card:  #1F1930;
    --ink:   #EFEBF7;
    --muted: #A297B8;
    --line:  #322A47;
    --chip:  #292138;
    --brand:        var(--gesto-violet-400);
    --brand-strong: var(--gesto-violet-500);
    --brand-soft:   #2A2044;
    --ok:   #4DBA7F;  --ok-soft:   #1C2E24;
    --warn: #EBB13F;  --warn-soft: #322A18;
    --err:  #E0655C;  --err-soft:  #33201E;
    --info: #6B9FE8;  --info-soft: #1D2735;
  }
}

/* ---- Scope sombre (.inverse) ----
   Pose la classe sur un header, une section ou un footer pour lui donner
   les surfaces du thème sombre quel que soit le thème du visiteur.
   C'est le « mix » du thème clair : héro, bandes de mise en avant et
   pied de page en encre, sections de contenu claires (décision 2026-07-12).
   Les valeurs sont celles du bloc @media sombre ci-dessus — les garder
   synchronisées. En thème sombre, la classe est neutre. */
.inverse {
  --paper: #161120;
  --card:  #1F1930;
  --ink:   #EFEBF7;
  --muted: #A297B8;
  --line:  #322A47;
  --chip:  #292138;
  --brand:        var(--gesto-violet-400);
  --brand-strong: var(--gesto-violet-500);
  --brand-soft:   #2A2044;
  background: var(--paper);
  color: var(--ink);
  color-scheme: dark;
}

/* ---- Thème sectoriel ----
   Dans l'espace abonné d'une application, poser la classe sur <html> ou <body> :
   la couleur du secteur remplace le violet comme accent.
   Le violet Gesto reste réservé au site vitrine gestoapp. */
.theme-hopital   { --brand: var(--sector-hopital);   --brand-strong: var(--sector-hopital);   --brand-soft: var(--sector-hopital-soft); }
.theme-ecole     { --brand: var(--sector-ecole);     --brand-strong: var(--sector-ecole);     --brand-soft: var(--sector-ecole-soft); }
.theme-hotel     { --brand: var(--sector-hotel);     --brand-strong: var(--sector-hotel);     --brand-soft: var(--sector-hotel-soft); }
.theme-gare      { --brand: var(--sector-gare);      --brand-strong: var(--sector-gare);      --brand-soft: var(--sector-gare-soft); }
.theme-transport { --brand: var(--sector-transport); --brand-strong: var(--sector-transport); --brand-soft: var(--sector-transport-soft); }
.theme-boutik    { --brand: var(--sector-boutik);    --brand-strong: var(--sector-boutik);    --brand-soft: var(--sector-boutik-soft); }

/* ---- Page vitrine d'une application : expose sa couleur et l'encre de ses aplats ---- */
.sector-hopital   { --sector: var(--sector-hopital);   --sector-soft: var(--sector-hopital-soft);   --sector-fill: var(--sector-hopital-fill); }
.sector-ecole     { --sector: var(--sector-ecole);     --sector-soft: var(--sector-ecole-soft);     --sector-fill: var(--sector-ecole-fill); }
.sector-hotel     { --sector: var(--sector-hotel);     --sector-soft: var(--sector-hotel-soft);     --sector-fill: var(--sector-hotel-fill); }
.sector-gare      { --sector: var(--sector-gare);      --sector-soft: var(--sector-gare-soft);      --sector-fill: var(--sector-gare-fill); }
.sector-transport { --sector: var(--sector-transport); --sector-soft: var(--sector-transport-soft); --sector-fill: var(--sector-transport-fill); }
.sector-boutik    { --sector: var(--sector-boutik);    --sector-soft: var(--sector-boutik-soft);    --sector-fill: var(--sector-boutik-fill); }
/* Sur un aplat de secteur, texte en encre — pleine, jamais adoucie :
   l'encre adoucie vers le fond retombe à 4,0–4,1 sur hopital, transport et boutik. */
[class*="sector-"] { --cta-on: var(--gesto-neutral-900); --cta-p: var(--gesto-neutral-900); }