/* =========================================================
   tokens.css
   Design system variables: colors, shadows, radii, spacing,
   typography, layout metrics.
   No component selector here.
   ========================================================= */

:root{

  /* ----- couleurs ----- */
  --c-text-primary:#190340;
  --c-text-secondary:#605E74;
  /* Icade brand teal (#0084A0 on the logo), darkened to hold AA 4.5:1
     contrast on white. Overridden at runtime by the organization's own
     color (cf web/js/theme.js, organizations.branding_tokens) */
  --c-primary:#007A94;
  --c-primary-light:#007A941A;
  --c-background:#303158;
  --c-white:#FFFFFF;
  --c-white-2:#F6F6F6;
  --c-grey-border:#DFDFDF;
  --c-grey-light:#ECECEC;
  --c-grey-lightest:#F3F3F3;
  --c-grey-darkest:#ACADAD;
  --c-green:#6CD264;
  --c-green-dark:#50b049;
  --c-red:#F34646;
  --c-orange:#B85400;
  --c-purple:#8B2FD6;

  /* derived pastel tints, used by the badges.
     The text colors are picked for AA contrast (4.5:1 minimum) on their
     own pastel background, deliberately distinct from the brand colors
     other components share (buttons, links...) */
  --c-green-soft:rgba(108,210,100,.14);
  --c-green-text:#2E7D32;
  --c-orange-soft:rgba(255,147,29,.14);
  --c-orange-text:#9C5700;
  --c-red-soft:rgba(243,70,70,.12);
  --c-red-text:#B92B2B;
  --c-purple-soft:rgba(167,70,243,.12);
  --c-gold-soft:#FFF3D6;
  --c-gold-text:#8F6300;
  --c-cat-text:#3A63C4;

  /* Bandeau de démonstration : couleurs figées, volontairement en dehors
     du thème. Les jetons sémantiques basculent en V2 sombre (--c-background
     y devient presque noir et --c-white un gris foncé), et le bandeau, qui
     s'en servait, y devenait illisible. C'est un repère système, pas du
     contenu : il doit se lire pareil dans les deux variantes. */
  --demo-bg:#303158;
  --demo-fg:#FFFFFF;

  /* ----- ombres, toujours neutres ----- */
  --shadow-nav:0px 0px 15px rgba(0,0,0,0.05);
  --shadow-drop:0px 0px 25px rgba(0,0,0,0.06);
  --shadow-hover:0px 0px 35px rgba(0,0,0,0.1);

  /* ----- rayons ----- */
  --r-input:6px;
  --r-btn:8px;
  --r-card:12px;
  --r-pill:100px;

  /* ----- espacements ----- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;

  /* ----- typographie ----- */
  --font-base:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  --fs-body:15px;
  --fs-small:14px;
  --fs-xsmall:13px;
  --fs-section:20px;
  --fs-page:24px;

  /* ----- gabarits ----- */
  --nav-h:72px;
  /* Hauteur du bandeau de démonstration, nulle tant qu'il n'y en a pas :
     tout ce qui se cale sous la navbar (elle-même fixed) l'ajoute, donc
     hors mode démonstration les calculs valent exactement ce qu'ils
     valaient avant. L'attribut est posé par js/appearance.js dès le
     premier paint, depuis son cache. */
  --demo-h:0px;
  --container:1140px;
  --gap:16px;
}

:root[data-demo]{ --demo-h:44px; }

/* -----------------------------------------------------------
   Breakpoints used by layout.css.
   CSS has no variables inside media queries, so they are
   documented here and hardcoded there.

   mobile  : up to 767px      (1 column)
   tablet  : 768px to 991px   (2 columns)
   desktop : 992px and up     (3 columns)
   ----------------------------------------------------------- */