/* ================================================================
   tokens-ds.css — enbi Design System · Foundations
   "Cadre, méthode, résolution. Inter clarifie. Inria raisonne.
    Le coral n'apparaît que lorsque quelque chose se débloque."
   Replaces tokens-n2.css entirely.
   Source: enbi Design System colors_and_type.css
================================================================ */

:root {

  /* ============================================================
     COLOR
     Three signifying roles, never decorative.
  ============================================================ */

  /* — Cadre (#1F2E39) : structure, sérieux, confiance — */
  --cadre:        #1F2E39;
  --cadre-900:    #16222B;
  --cadre-800:    #1F2E39;
  --cadre-700:    #2A3D49;
  --cadre-600:    #3A4F5C;
  --cadre-500:    rgba(86,105,117,.38);

  /* — Méthode (#265C8F) : analyse, raisonnement, mise en relation — */
  --methode:      #265C8F;
  --methode-700:  #1E4A73;
  --methode-600:  #265C8F;
  --methode-400:  #5B86AD;
  --methode-200:  #B9CBDC;
  --methode-tint: #EAF0F6;

  /* — Résolution (#FD5B6C) : le moment de clarté, l'action. RARE. — */
  --resolution:      #FD5B6C;
  --resolution-700:  #E23E50;
  --resolution-500:  #FD5B6C;
  --resolution-300:  rgba(253,91,108,.4);
  --resolution-tint: #FFF0F1;

  /* — Paper & neutrals — */
  --paper:        #FBFAF8;
  --paper-alt:    #F6F5F3;
  --paper-rose:   #E9E5E2;
  --paper-blue:   #E2E1E0;
  --surface:      #FFFFFF;
  --line:         rgba(31,46,57,.09);
  --line-strong:  rgba(31,46,57,.2);

  /* — Ink (text on light) — */
  --ink:    #1F2E39;
  --ink-2:  rgba(31,46,57,.7);
  --ink-3:  rgba(31,46,57,.5);
  --ink-4:  rgba(31,46,57,.3);

  /* — On dark (text on cadre navy) — */
  --on-dark:    #EDEFF1;
  --on-dark-2:  rgba(237,239,241,.65);

  /* ============================================================
     TYPOGRAPHY
  ============================================================ */
  --font-sans:  "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Inria Serif", Georgia, "Times New Roman", serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  clamp(2.5rem, 5vw, 4rem);

  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.62;

  --tracking-tight: -0.02em;
  --tracking-label: 0.08em;

  /* ============================================================
     FORM — lines sort, frames conclude
     Border weight encodes certainty; colour encodes theme.
  ============================================================ */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  --frame-light:  1px solid var(--line-strong);
  --frame-method: 1.5px solid var(--methode);
  --frame-strong: 2px solid var(--resolution);

  --shadow-sm: none;
  --shadow:    none;
  --shadow-functional: 0 2px 8px rgba(31,46,57,.10);

  /* ============================================================
     SPACE — base 4px
  ============================================================ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  --measure: 64ch;

  /* ============================================================
     MOTION — animation = clarification
  ============================================================ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.45s;

  /* ============================================================
     BRIDGE — legacy component variable names → DS values
     Allows components-n3.css to work without rewrite.
     Remove progressively as components are migrated.
  ============================================================ */
  --p-navy:            var(--cadre);
  --p-blue:            var(--methode);
  --p-blue-deep:       var(--methode-700);
  --p-coral:           var(--resolution);
  --p-coral-dark:      var(--resolution-700);
  --p-warm:            var(--paper);
  --p-warm-mid:        var(--paper-alt);
  --p-white:           var(--surface);

  --color-bg-page:         var(--paper);
  --color-bg-surface:      var(--surface);
  --color-bg-navy:         var(--cadre);
  --color-bg-tint-coral:   var(--resolution-tint);
  --color-bg-tint-blue:    var(--methode-tint);
  --color-bg-tint-navy:    rgba(31,46,57,.05);

  --color-text-primary:       var(--ink);
  --color-text-secondary:     var(--ink-2);
  --color-text-faint:         var(--ink-3);
  --color-text-inverse:       var(--on-dark);
  --color-text-inverse-dim:   var(--on-dark-2);
  --color-text-inverse-faint: rgba(237,239,241,.4);

  --color-brand-coral:  var(--resolution);
  --color-brand-blue:   var(--methode);
  --color-brand-navy:   var(--cadre);
  --color-brand-warm:   var(--paper);

  --color-border-subtle:  var(--line);
  --color-border-inverse: rgba(237,239,241,.14);

  --radius-xs:   var(--radius-sm);
  --radius-full: var(--radius-lg); /* pill shapes forbidden — map to radius-lg */

  --focus-ring: 2px solid var(--methode);
}