/* ==========================================================================
   WINDOW PORTAL NETWORK — Système de design
   Jetons de couleur, typographie et espacement.

   Les trois couleurs de marque viennent du logo : deux losanges qui se
   superposent. Le bleu et le jaune sont les deux surfaces, le violet naît
   de leur intersection. Chacune porte une partie du produit :

     bleu    Window   — le site public
     jaune   Network  — la communauté, les clients
     violet  Portal   — le portail de gestion, là où les deux se rejoignent

   Chaque couleur est déclinée de 50 (le plus clair) à 900 (le plus foncé).
   La valeur exacte du logo porte le repère « couleur de marque » ci-dessous.
   Tous les contrastes annotés sont mesurés selon WCAG 2.1.
   ========================================================================== */

:root {
  /* --- Bleu — Window ------------------------------------------------- */
  --wpn-bleu-50:  #F4F7FA;
  --wpn-bleu-100: #D0DFED;
  --wpn-bleu-200: #A8C7E4;
  --wpn-bleu-300: #7DAEDE;   /* éclaircissement pour fond sombre */
  --wpn-bleu-400: #4E96DB;
  --wpn-bleu-500: #217ED6;
  --wpn-bleu-600: #1465B2;   /* texte sur blanc — 5.94:1 */
  --wpn-bleu-700: #0A4C8B;   /* ← couleur de marque — 8.68:1 sur blanc */
  --wpn-bleu-800: #083158;
  --wpn-bleu-900: #041526;

  /* --- Jaune — Network ------------------------------------------------ */
  /* Attention : le jaune de marque ne passe jamais en texte sur blanc
     (1.93:1). Il sert d'aplat, de fond et d'accent. Pour du texte,
     utiliser jaune-700 ou plus foncé. */
  --wpn-jaune-50:  #FAF8F5;
  --wpn-jaune-100: #EDE4CF;
  --wpn-jaune-200: #E6D1A3;
  --wpn-jaune-300: #E4C172;
  --wpn-jaune-400: #E8B23C;  /* ← couleur de marque — aplats seulement */
  --wpn-jaune-500: #DEA11C;
  --wpn-jaune-600: #B88618;
  --wpn-jaune-700: #926A14;  /* texte sur blanc — 4.89:1 */
  --wpn-jaune-800: #6C4F0F;
  --wpn-jaune-900: #47340B;

  /* --- Violet — Portal ------------------------------------------------ */
  --wpn-violet-50:  #F8F5FA;
  --wpn-violet-100: #E4D6EA;
  --wpn-violet-200: #D0B4DD;
  --wpn-violet-300: #BD91D1;  /* éclaircissement pour fond sombre */
  --wpn-violet-400: #AB6BC8;
  --wpn-violet-500: #9A43C1;  /* texte sur blanc — 5.32:1 */
  --wpn-violet-600: #8131A4;
  --wpn-violet-700: #662284;
  --wpn-violet-800: #4A1661;  /* ← couleur de marque — 13.30:1 sur blanc */
  --wpn-violet-900: #14071B;

  /* --- Neutres --------------------------------------------------------- */
  --wpn-neutre-50:  #F7F7F8;
  --wpn-neutre-100: #D4D7DB;
  --wpn-neutre-200: #B0B6C0;
  --wpn-neutre-300: #8B95A6;
  --wpn-neutre-400: #67748B;  /* texte secondaire — 4.72:1 */
  --wpn-neutre-500: #4A5568;
  --wpn-neutre-600: #3D4655;
  --wpn-neutre-700: #303642;
  --wpn-neutre-800: #222730;
  --wpn-neutre-900: #15181D;

  --wpn-ancre: #1B1F2A;   /* le noir de la marque, jamais #000 */
  --wpn-fond:  #F5F5F4;   /* le blanc de la marque, légèrement chaud */
  --wpn-blanc: #FFFFFF;

  /* --- Rôles sémantiques ----------------------------------------------
     À utiliser dans les composants plutôt que les valeurs brutes : un
     changement de marque se fait alors ici, en un seul endroit. */
  --couleur-texte:            var(--wpn-ancre);
  --couleur-texte-doux:       var(--wpn-neutre-400);
  --couleur-fond:             var(--wpn-fond);
  --couleur-surface:          var(--wpn-blanc);
  --couleur-bordure:          var(--wpn-neutre-100);
  --couleur-accent:           var(--wpn-bleu-700);
  --couleur-accent-texte:     var(--wpn-blanc);
  --couleur-lien:             var(--wpn-bleu-600);

  /* --- Typographie -----------------------------------------------------
     Le lettrage du logo est une grotesque géométrique large et grasse.
     Inter la prolonge bien à l'écran ; Fraunces apporte la chaleur
     éditoriale qui empêche l'ensemble de virer au SaaS générique. */
  --police-titre:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --police-texte:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --police-ui:     var(--police-texte);
  --police-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle typographique — rapport 1.25 (tierce majeure) */
  --texte-xs:   0.75rem;    /* 12px — légendes, étiquettes */
  --texte-sm:   0.875rem;   /* 14px — texte secondaire */
  --texte-base: 1rem;       /* 16px — corps */
  --texte-lg:   1.25rem;    /* 20px — chapô */
  --texte-xl:   1.563rem;   /* 25px — h3 */
  --texte-2xl:  1.953rem;   /* 31px — h2 */
  --texte-3xl:  2.441rem;   /* 39px — h1 */
  --texte-4xl:  3.052rem;   /* 49px — titre de page */
  --texte-5xl:  3.815rem;   /* 61px — héros */

  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-grasse:  700;
  --graisse-noire:   900;   /* la graisse du logo */

  --interligne-serre: 1.15;  /* titres */
  --interligne-normal: 1.6;  /* corps */

  /* --- Espacement — base de 4px ---------------------------------------- */
  --espace-1: 0.25rem;  --espace-2: 0.5rem;   --espace-3: 0.75rem;
  --espace-4: 1rem;     --espace-6: 1.5rem;   --espace-8: 2rem;
  --espace-12: 3rem;    --espace-16: 4rem;    --espace-24: 6rem;
  --espace-32: 8rem;

  /* --- Rayons — repris de l'arrondi des losanges du logo ---------------- */
  --rayon-sm: 4px;
  --rayon-md: 8px;
  --rayon-lg: 16px;
  --rayon-xl: 24px;

  /* --- Ombres — discrètes, la marque est plate -------------------------- */
  --ombre-sm: 0 1px 2px rgba(27, 31, 42, 0.06);
  --ombre-md: 0 4px 12px rgba(27, 31, 42, 0.08);
  --ombre-lg: 0 12px 32px rgba(27, 31, 42, 0.12);

  --largeur-contenu: 1200px;
  --largeur-texte: 68ch;
}

/* --- Mode sombre --------------------------------------------------------
   Les couleurs de marque sont foncées : sur fond sombre elles disparaissent.
   On remonte donc d'une famille vers les tons 300, qui gardent la teinte
   tout en restant lisibles (bleu-300 : 7.04:1 sur l'ancre). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --couleur-texte:        var(--wpn-neutre-50);
    --couleur-texte-doux:   var(--wpn-neutre-200);
    --couleur-fond:         var(--wpn-ancre);
    --couleur-surface:      var(--wpn-neutre-800);
    --couleur-bordure:      var(--wpn-neutre-700);
    --couleur-accent:       var(--wpn-bleu-300);
    --couleur-accent-texte: var(--wpn-ancre);
    --couleur-lien:         var(--wpn-bleu-300);
  }
}

:root[data-theme="dark"] {
  --couleur-texte:        var(--wpn-neutre-50);
  --couleur-texte-doux:   var(--wpn-neutre-200);
  --couleur-fond:         var(--wpn-ancre);
  --couleur-surface:      var(--wpn-neutre-800);
  --couleur-bordure:      var(--wpn-neutre-700);
  --couleur-accent:       var(--wpn-bleu-300);
  --couleur-accent-texte: var(--wpn-ancre);
  --couleur-lien:         var(--wpn-bleu-300);
}