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

:root{

  /* ----- colors ----- */
  --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;

  /* Demonstration banner: fixed colors, deliberately outside the theme.
     The semantic tokens switch in dark V2 (--c-background turns almost
     black there and --c-white a dark grey), and the banner, which used
     them, became unreadable. It is a system marker, not content: it must
     read the same in both variants. */
  --demo-bg:#303158;
  --demo-fg:#FFFFFF;

  /* ----- shadows, always neutral ----- */
  --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);

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

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

  /* ----- typography ----- */
  --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;

  /* ----- layout metrics ----- */
  --nav-h:72px;
  /* Height of the demonstration banner, zero while there is none:
     everything that sits below the navbar (itself fixed) adds it, so
     outside demonstration mode the calculations come out exactly as
     they did before. The attribute is set by js/appearance.js from the
     first paint, out of its 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)
   ----------------------------------------------------------- */