/* =========================================================================
   SIGEC · Module PDC — Design System
   Fondé sur la Charte Graphique du Gouvernement du Bénin (« La Mariana », 2016)
   Couleurs du drapeau national : Vert 348C · Jaune 123C · Rouge 455C
   Typographies officielles : Montserrat (titres) · Arial (bureautique)
   ========================================================================= */

:root {
  /* --- Couleurs de marque (drapeau national) --- */
  --bj-green: #006828;   /* Pantone 348C — RVB 0-104-40   */
  --bj-yellow: #FFBE00;  /* Pantone 123C — RVB 255-190-0  */
  --bj-red: #EB0000;     /* Pantone 455C — RVB 235-0-0    */
  --bj-black: #000000;   /* Pantone Black 6C              */

  /* --- Déclinaisons vert (couleur primaire de l'interface) --- */
  --green-950: #04170c;  /* vert forêt quasi-noir — sidebar, bandeaux officiels */
  --green-925: #072413;
  --green-900: #003d18;
  --green-800: #005121;
  --green-700: #006828;
  --green-600: #0a7d38;
  --green-500: #16974a;
  --green-100: #d6ebdd;
  --green-50:  #eef7f1;

  /* --- Jaune (accent / mise en avant) --- */
  --yellow-600: #d99f00;
  --yellow-500: #FFBE00;
  --yellow-100: #fff2cc;
  --yellow-50:  #fff9e6;

  /* --- Rouge (alerte / retard / danger) --- */
  --red-600: #c40000;
  --red-500: #EB0000;
  --red-100: #fcd6d6;
  --red-50:  #fdeaea;

  /* --- Sémantique --- */
  --primary: var(--green-700);
  --primary-hover: var(--green-800);
  --accent: var(--yellow-500);
  --success: var(--green-600);
  --warning: var(--yellow-600);
  --danger: var(--red-500);
  --info: #1e6fb8;

  /* --- Neutres --- */
  --ink-900: #0f1b14;
  --ink-700: #33413a;
  --ink-500: #667069;
  --ink-400: #98a19b;
  --ink-300: #c7ccc9;
  --line: #e6eae8;
  --surface: #ffffff;
  --surface-2: #f6f8f7;
  --bg: #f0f3f1;

  /* --- Typographie --- */
  --font-title: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", Arial, "Segoe UI", sans-serif;

  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 14px;
  --fs-lg: 16px;  --fs-xl: 20px;  --fs-2xl: 26px; --fs-3xl: 34px;

  /* --- Rayons, ombres, espacements --- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-full: 999px;
  --sh-1: 0 1px 2px rgba(15,27,20,.06), 0 1px 3px rgba(15,27,20,.05);
  --sh-2: 0 4px 12px rgba(15,27,20,.08);
  --sh-3: 0 12px 32px rgba(15,27,20,.12);
  --space: 8px;

  /* --- Layout --- */
  --sidebar-w: 264px;
  --header-h: 64px;

  /* --- Texture « tissée » (évocation textile wax/kente, pur CSS) ---
     Deux trames diagonales croisées très discrètes, posées sur un fond
     sombre : lisible comme une matière, jamais comme un motif chargé.
     Réutilisée par la sidebar et les bandeaux officiels (dashboard). */
  --weave:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.022) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.20)        0 2px, transparent 2px 7px);
}

/* Bande tricolore officielle — élément de signature réutilisable */
.bj-tricolor {
  height: 4px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--bj-green) 0 33.33%,
    var(--bj-yellow) 33.33% 66.66%,
    var(--bj-red) 66.66% 100%
  );
}
.bj-tricolor--vertical {
  width: 4px; height: 100%;
  background: linear-gradient(
    to bottom,
    var(--bj-green) 0 33.33%,
    var(--bj-yellow) 33.33% 66.66%,
    var(--bj-red) 66.66% 100%
  );
}