/* Black IP 360 — design tokens.
   Porté verbatim depuis le handoff : _ds/blackip360-design-system-ab2dc1ee-.../tokens/tokens.css
   NE PAS ÉDITER : c'est la source de vérité du design. Jamais de hex en dur ailleurs. */
:root {
  /* ============ Brand colors (charte officielle) ============ */
  --bip-charcoal: #181926;      /* noir / charbon foncé — chrome, fonds sérieux, cybersécurité */
  --bip-charcoal-2: #232539;    /* charbon adouci — surfaces sombres secondaires */
  --bip-blue: #2A3AF2;          /* BLEU DE MARQUE — boutons, liens, accents clés */
  --bip-blue-alt: #3858e9;      /* bleu alternatif — emphases, survols */
  --bip-white: #ffffff;
  --bip-text: #333333;          /* gris foncé — texte courant */
  --bip-ink: #212529;           /* presque noir — titres forts */
  --bip-grey: #f5f6fa;          /* gris neutre — bandes de sections claires */
  --bip-grey-2: #e9ecef;        /* gris clair alt */
  --bip-grey-3: #d9d9d9;        /* bordures / séparateurs */
  --bip-muted: #6b7280;         /* texte secondaire sur fond clair */

  /* Accent vert de la charte — usage très parcimonieux (coche de réassurance, soulignage). */
  --bip-green: #3faf7a;
  --bip-green-deep: #2e7d5b;

  /* ============ Semantic ============ */
  --bip-bg: var(--bip-white);
  --bip-bg-dark: var(--bip-charcoal);
  --bip-surface: var(--bip-white);
  --bip-surface-alt: var(--bip-grey);
  --bip-text-on-dark: var(--bip-white);
  --bip-text-muted-on-dark: rgba(255,255,255,.66);
  --bip-link: var(--bip-blue);
  --bip-border: var(--bip-grey-3);
  --bip-focus-ring: rgba(42,58,242,.22);

  /* ============ Typography ============ */
  --bip-font-heading: "Exo 2", "Segoe UI", Helvetica, Arial, sans-serif;
  --bip-font-sans: "Titillium Web", "Segoe UI", Helvetica, Arial, sans-serif;
  --bip-fw-regular: 400;
  --bip-fw-semibold: 600;
  --bip-fw-bold: 700;
  --bip-fw-heavy: 800;

  /* Échelle — line-height titres 1.2, corps 1.6 */
  --bip-fs-xs: 13px;
  --bip-fs-sm: 14px;
  --bip-fs-base: 16px;
  --bip-fs-lg: 18px;
  --bip-fs-h4: 24px;
  --bip-fs-h3: 32px;
  --bip-fs-h2: 50px;
  --bip-fs-h1: 70px;
  --bip-lh-tight: 1.2;
  --bip-lh-body: 1.6;

  /* ============ Radii ============ */
  --bip-radius-sm: 2px;
  --bip-radius-md: 8px;
  --bip-radius-lg: 16px;
  --bip-radius-pill-sm: 44px; /* bouton contour */
  --bip-radius-pill: 100px;   /* bouton plein */

  /* ============ Spacing (rythme 4px) ============ */
  --bip-space-1: 4px;
  --bip-space-2: 8px;
  --bip-space-3: 12px;
  --bip-space-4: 16px;
  --bip-space-5: 20px;
  --bip-space-6: 24px;
  --bip-space-8: 32px;
  --bip-space-10: 40px;
  --bip-space-12: 48px;
  --bip-space-16: 64px;

  /* ============ Elevation ============ */
  --bip-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --bip-shadow-md: 0 .5rem 1rem rgba(0,0,0,.15);
  --bip-shadow-lg: 0 12px 32px rgba(24,25,38,.16);

  /* ============ Motion ============ */
  --bip-transition: all .3s ease-out;
}