/* ------------------------------------------------------------------
   Peau « YHB » — l'identité de marque, reprise telle quelle.

   Source : 02_BRANDS/MAISON/YHBR_Yan_Haltey_Brands/00_IDENTITY/
            YHB-brand-identity/design-system/visual-tokens.md

   Les valeurs ci-dessous ne sont pas interprétées : ce sont les jetons du
   design system, recopiés. Là où la structure de l'ERP demande un rôle que
   le design system ne nomme pas — le vert d'un succès, l'ocre d'un manque —
   la valeur est dérivée de la palette et le dit en commentaire.

   Le principe de dualité de la charte est tenu : « Rêve » est l'encre, les
   fonds sombres ; « Réel » est le papier, les fonds clairs. Le mode clair
   sert de défaut parce qu'un ERP se lit toute la journée.

   Comme toute peau, ce fichier ne déclare **que** des variables. Un test le
   vérifie ligne par ligne.

   Ce qui manque encore : les fichiers de fonte. Manrope et IBM Plex Mono
   sont déclarées ici, mais aucun woff2 n'accompagne le design system — le
   site les charge visiblement depuis ailleurs. Tant qu'ils ne sont pas
   déposés dans public/fonts/, les replis s'appliquent et la typographie
   n'est pas celle de la marque. Signalé dans docs/A-DECIDER.md.
   ------------------------------------------------------------------ */

:root {
  /* ---- Papier · le « Réel ». Palette claire du design system. ---- */
  --papier: #F4F1EA;
  --surface: #FBF9F4;
  --surface-2: #ECE7DD;
  --encre: #0B0B0E;
  --gris: #56544F;
  --trait: rgba(11, 11, 14, .12);
  --trait-clair: rgba(11, 11, 14, .07);

  /* ---- L'accent : le magenta de la marque. ---- */
  --accent: #E6008A;
  --accent-doux: #FCE4F1;
  --sur-accent: #FFFFFF;

  /* ---- Le rail.
         Clair, pas sombre : le « Réel » de la charte, comme le reste de la
         page. Le violet profond ne disparaît pas pour autant — il vit dans le
         dégradé signature du monogramme, où il a plus de force qu'étalé sur
         une colonne entière. ---- */
  --roche: #FBF9F4;
  --roche-encre: #0B0B0E;
  --roche-trait: rgba(11, 11, 14, .10);

  /* ---- Le dégradé signature, tel quel. ---- */
  --degrade: linear-gradient(112deg, #3A0E63 0%, #5B1A8C 28%, #E6008A 100%);

  /* ---- Les rôles sémantiques.
         Le design system ne les nomme pas — il n'en a pas besoin sur un site
         vitrine. Ils sont dérivés ici pour rester lisibles à côté du magenta,
         sans jamais entrer en concurrence avec lui : l'accent reste la seule
         couleur qui appelle l'action. ---- */
  --vert: #1F7A5C;
  --vert-doux: #DDF0E8;
  --ocre: #8A5A1B;
  --ocre-doux: #F5E9D8;
  --rouge: #B7003C;
  --rouge-doux: #FBE1E8;

  /* ---- Typographie du design system. ---- */
  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Le rayon.
         Le design system dit 14px. C'est juste pour une carte et beaucoup
         pour un champ de saisie haut de trente pixels — d'où deux valeurs,
         la seconde n'existant que parce que l'ERP a des formulaires que le
         site vitrine n'a pas. ---- */
  --r: 6px;
  --r-carte: 14px;
}

/*
 * Le choix explicite prime sur la préférence système, dans les deux sens.
 *
 * `prefers-color-scheme` dit ce que la machine préfère ; `data-theme` dit ce
 * que la personne a demandé. Quelqu'un dont le système est en sombre et qui
 * choisit le clair doit obtenir le clair — d'où deux blocs, et non un seul
 * qui ne saurait faire marche arrière.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    /* ---- Encre · le « Rêve ». Jamais de noir pur, dit la charte. ---- */
    --papier: #14141A;
    --surface: #1B1B22;
    --surface-2: #25242A;
    --encre: #FAF8F3;
    --gris: #C8C4BB;
    --trait: rgba(244, 241, 234, .13);
    --trait-clair: rgba(244, 241, 234, .07);

    --accent: #FF2EA6;
    --accent-doux: #3B1030;
    --sur-accent: #14141A;

    /* En mode sombre le rail suit la surface, toujours sans noir pur. */
    --roche: #1B1B22;
    --roche-encre: #FAF8F3;
    --roche-trait: rgba(244, 241, 234, .12);

    --vert: #4FB894;
    --vert-doux: #14322A;
    --ocre: #D9A05B;
    --ocre-doux: #33261455;
    --rouge: #FF6B8F;
    --rouge-doux: #3A1220;
  }
}

:root[data-theme="sombre"] {
    /* ---- Encre · le « Rêve ». Jamais de noir pur, dit la charte. ---- */
    --papier: #14141A;
    --surface: #1B1B22;
    --surface-2: #25242A;
    --encre: #FAF8F3;
    --gris: #C8C4BB;
    --trait: rgba(244, 241, 234, .13);
    --trait-clair: rgba(244, 241, 234, .07);

    --accent: #FF2EA6;
    --accent-doux: #3B1030;
    --sur-accent: #14141A;

    /* En mode sombre le rail suit la surface, toujours sans noir pur. */
    --roche: #1B1B22;
    --roche-encre: #FAF8F3;
    --roche-trait: rgba(244, 241, 234, .12);

    --vert: #4FB894;
    --vert-doux: #14322A;
    --ocre: #D9A05B;
    --ocre-doux: #33261455;
    --rouge: #FF6B8F;
    --rouge-doux: #3A1220;
}

:root[data-theme="clair"] {
  /* ---- Papier · le « Réel ». Palette claire du design system. ---- */
  --papier: #F4F1EA;
  --surface: #FBF9F4;
  --surface-2: #ECE7DD;
  --encre: #0B0B0E;
  --gris: #56544F;
  --trait: rgba(11, 11, 14, .12);
  --trait-clair: rgba(11, 11, 14, .07);

  /* ---- L'accent : le magenta de la marque. ---- */
  --accent: #E6008A;
  --accent-doux: #FCE4F1;
  --sur-accent: #FFFFFF;

  /* ---- Le rail.
         Clair, pas sombre : le « Réel » de la charte, comme le reste de la
         page. Le violet profond ne disparaît pas pour autant — il vit dans le
         dégradé signature du monogramme, où il a plus de force qu'étalé sur
         une colonne entière. ---- */
  --roche: #FBF9F4;
  --roche-encre: #0B0B0E;
  --roche-trait: rgba(11, 11, 14, .10);

  /* ---- Le dégradé signature, tel quel. ---- */
  --degrade: linear-gradient(112deg, #3A0E63 0%, #5B1A8C 28%, #E6008A 100%);

  /* ---- Les rôles sémantiques.
         Le design system ne les nomme pas — il n'en a pas besoin sur un site
         vitrine. Ils sont dérivés ici pour rester lisibles à côté du magenta,
         sans jamais entrer en concurrence avec lui : l'accent reste la seule
         couleur qui appelle l'action. ---- */
  --vert: #1F7A5C;
  --vert-doux: #DDF0E8;
  --ocre: #8A5A1B;
  --ocre-doux: #F5E9D8;
  --rouge: #B7003C;
  --rouge-doux: #FBE1E8;

  /* ---- Typographie du design system. ---- */
  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Le rayon.
         Le design system dit 14px. C'est juste pour une carte et beaucoup
         pour un champ de saisie haut de trente pixels — d'où deux valeurs,
         la seconde n'existant que parce que l'ERP a des formulaires que le
         site vitrine n'a pas. ---- */
  --r: 6px;
  --r-carte: 14px;
}