/* ============================================================
   Syndic Ledger — Design System · tokens.css
   Direction B « SaaS productivité », actée le 2026-08-02
   (docs/idee-generale.md · exploration : docs/design/).

   Deux couches :
     1. PRIMITIVES — les gammes brutes (jamais consommées
        directement par un composant) ;
     2. RÔLES — ce que les composants consomment.
   Le théming clair/sombre est un re-mapping des rôles : la
   structure sombre est prête, seules les valeurs claires sont
   validées à ce jour.
   ============================================================ */

:root {
  /* ---- primitives · gris froids ---- */
  --gris-50:  #fbfbfd;
  --gris-100: #f6f7f9;
  --gris-150: #eef0f3;
  --gris-200: #e8eaee;
  --gris-250: #e3e6ea;
  --gris-300: #c4c9d2;
  --gris-350: #b9c0cc;
  --gris-600: #575e6b;
  --gris-650: #454d5c;
  --gris-750: #3f4653;
  --gris-900: #1b1e24;

  /* ---- primitives · bleus (accent & rôle CS) ---- */
  --bleu-100: #eef2fd;
  --bleu-150: #dbe5fa;
  --bleu-200: #d3ddf6;
  --bleu-300: #a9bfef;
  --bleu-500: #2b52c8;
  --bleu-600: #2343a8;
  --bleu-ciel-400: #38bdf8;   /* dégradé du logo uniquement */
  --marine-800: #23386e;

  /* ---- primitives · ambre (rôle syndic) ---- */
  --ambre-100: #fdf6e7;
  --ambre-200: #f4e6c2;
  --ambre-300: #eee0bd;
  --ambre-800: #5c4a1a;

  /* ---- primitives · rouge (critique) ---- */
  --rouge-100: #fdf3f5;
  --rouge-700: #a11d33;

  /* ---- primitives · typographie ---- */
  --police-interface: -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, Inter, sans-serif;
  --texte-11: 11px;
  --texte-115: 11.5px;
  --texte-12: 12px;
  --texte-125: 12.5px;
  --texte-13: 13px;
  --texte-145: 14.5px;
  --texte-16: 16px;
  --texte-19: 19px;

  /* ---- primitives · espacement (base 4) ---- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  /* ---- primitives · formes ---- */
  --rayon-controle: 6px;
  --rayon-carte: 8px;
  --rayon-zone: 10px;
  --rayon-pilule: 99px;
  --ombre-carte: 0 1px 2px rgba(16, 24, 40, .05);
  --ombre-flottante: 0 8px 24px rgba(16, 24, 40, .10);
  --ombre-modale: 0 12px 32px rgba(16, 24, 40, .20);
  --scrim: rgba(20, 22, 26, .4);               /* fond assombri derrière une modale */
}

/* ============================================================
   RÔLES — thème clair (validé le 2026-08-02)
   Les composants ne consomment QUE ces variables.
   ============================================================ */
:root {
  /* surfaces */
  --surface-page: var(--gris-100);
  --surface-carte: #ffffff;
  --surface-nav: var(--gris-50);
  --surface-tonale: var(--gris-150);          /* zones creusées : à trier, segmenté */
  --surface-champ: #ffffff;

  /* encres */
  --encre: var(--gris-900);
  --encre-2: var(--gris-600);                 /* secondaire — AA sur toutes les surfaces ci-dessus */
  --encre-inverse: #ffffff;

  /* traits */
  --trait: var(--gris-250);
  --trait-appuye: var(--gris-350);
  --trait-discret: var(--gris-300);           /* bordures pointillées : zones creusées, dépose, création */

  /* action — l'UNIQUE accent, réservé à l'action */
  --accent-action: var(--bleu-500);
  --accent-action-survol: var(--bleu-600);
  --accent-fond: var(--bleu-100);
  --accent-encre: var(--marine-800);          /* texte foncé sur fond accent pâle */

  /* critique — vieux silence, garde-fous */
  --critique: var(--rouge-700);
  --critique-fond: var(--rouge-100);

  /* rôles de correspondants (vue fil, badges, portail) */
  --role-cs-fond: var(--bleu-100);
  --role-cs-trait: var(--bleu-200);
  --role-cs-trait-fort: var(--bleu-300);      /* bord des envois « nôtres » sur fond teinté CS */
  --role-cs-encre: var(--marine-800);
  --role-syndic-fond: var(--ambre-100);
  --role-syndic-trait: var(--ambre-300);
  --role-syndic-encre: var(--ambre-800);
  --role-tiers-fond: var(--gris-200);
  --role-tiers-trait: var(--gris-250);
  --role-tiers-encre: var(--gris-750);

  /* surfaces additionnelles */
  --surface-survol: var(--gris-150);          /* hover nav, boutons discrets */
  --surface-avatar: var(--gris-200);           /* avatar-mini, initiales secondaires */

  /* logo v0.x */
  --logo-1: var(--bleu-500);
  --logo-2: var(--bleu-ciel-400);
  --logo-rx: 20px;
  --logo-clair: #ffffff;

  /* typographie appliquée */
  --texte-corps: var(--texte-13);
  --texte-secondaire: var(--texte-12);
  --texte-titre-page: var(--texte-16);
  --texte-titre-carte: var(--texte-13);

  /* chiffres : partout où le temps s'affiche ou se compare */
  --chiffres-tabulaires: tabular-nums;
}

/* ============================================================
   RÔLES — thème sombre : STRUCTURE PRÊTE, VALEURS NON VALIDÉES.
   Le passage au sombre est un re-mapping de ce bloc — aucun
   composant à toucher. Décommenter et valider (contrastes AA,
   simulation daltonisme) avant toute mise en service.
   ============================================================ */
/*
[data-theme="sombre"] {
  --surface-page: #16181d;
  --surface-carte: #1f232b;
  --surface-nav: #1a1d23;
  --surface-tonale: #262b34;
  --surface-champ: #1f232b;
  --encre: #e8eaee;
  --encre-2: #9aa3b2;
  --encre-inverse: #16181d;
  --trait: #2e3440;
  --trait-appuye: #444c5c;
  --accent-action: #7c9bf5;
  --accent-action-survol: #9db4f8;
  --accent-fond: #22304f;
  --accent-encre: #c9d7fb;
  --critique: #f28ba0;
  --critique-fond: #3a2028;
  --role-cs-fond: #22304f;     --role-cs-trait: #33437a;    --role-cs-encre: #c9d7fb;
  --role-syndic-fond: #3a3220; --role-syndic-trait: #57491f; --role-syndic-encre: #ecd9a3;
  --role-tiers-fond: #262b34;  --role-tiers-trait: #2e3440; --role-tiers-encre: #c3cad6;
}
*/