/* ============================================================
   Mon Poulailler — Design Tokens
   Refonte UI 2026 · vert sapin + accent terracotta
   À lier AVANT styles.css :
     <link rel="stylesheet" href="design-tokens.css" />
     <link rel="stylesheet" href="styles.css" />
   ============================================================ */

:root {
  /* ---------- Couleurs de marque ---------- */
  --mp-vert: #1C6B4F;          /* couleur principale (boutons, accents) */
  --mp-vert-fonce: #175A41;    /* hover du vert principal */
  --mp-vert-nuit: #15281F;     /* sidebar / fonds sombres */
  --mp-vert-nuit-2: #173F2E;   /* dégradé hero (début) */
  --mp-vert-clair: #EAF1EC;    /* fonds doux, puces actives */
  --mp-vert-clair-2: #E7F1EB;  /* item de nav actif (mobile) */

  /* ---------- Accent terracotta (dépenses) ---------- */
  --mp-terracotta: #B6603E;
  --mp-terracotta-fonce: #A8542E;
  --mp-terracotta-clair: #F5E3D6;

  /* ---------- Neutres ---------- */
  --mp-fond: #F4F6F2;          /* fond d'application */
  --mp-surface: #FFFFFF;       /* cartes, panneaux */
  --mp-surface-2: #FAFBF9;     /* fond de section secondaire */
  --mp-bordure: #E6EAE3;       /* bordures de cartes */
  --mp-bordure-2: #DCE2DA;     /* bordures de champs/boutons */
  --mp-bordure-pointillee: #D8DED4; /* états vides */

  /* ---------- Texte ---------- */
  --mp-texte: #14201B;         /* titres */
  --mp-texte-2: #36443D;       /* labels */
  --mp-texte-3: #69736D;       /* texte secondaire */
  --mp-texte-4: #8B948E;       /* texte tertiaire / hints */

  /* ---------- Couleurs de statut ---------- */
  --mp-ok-bg: #E4F2EA;     --mp-ok-fg: #1C7A4D;     /* succès / actif */
  --mp-warn-bg: #F7EFD6;   --mp-warn-fg: #946410;   /* à surveiller */
  --mp-danger-bg: #FAE7E4; --mp-danger-fg: #B23F38; /* critique */
  --mp-info-bg: #E5EEF3;   --mp-info-fg: #2A6E87;   /* information */
  --mp-muted-bg: #ECEFEA;  --mp-muted-fg: #69736D;  /* neutre / inactif */

  /* ---------- Typographie ---------- */
  --mp-font: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mp-fs-hero: 44px;
  --mp-fs-h1: 19px;
  --mp-fs-h2: 17px;
  --mp-fs-kpi: 27px;
  --mp-fs-body: 14px;
  --mp-fs-sm: 12.5px;
  --mp-fs-xs: 11px;
  --mp-fw-regular: 400;
  --mp-fw-medium: 500;
  --mp-fw-bold: 700;
  --mp-fw-black: 800;

  /* ---------- Espacements (échelle 4px) ---------- */
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 20px;
  --mp-space-6: 24px;
  --mp-space-8: 32px;

  /* ---------- Rayons ---------- */
  --mp-radius-sm: 8px;
  --mp-radius: 11px;
  --mp-radius-card: 14px;
  --mp-radius-lg: 16px;
  --mp-radius-pill: 999px;

  /* ---------- Ombres ---------- */
  --mp-shadow-card: 0 1px 2px rgba(20, 40, 30, .04);
  --mp-shadow-pop: 0 12px 32px rgba(20, 40, 30, .16);
  --mp-shadow-toast: 0 10px 30px rgba(0, 0, 0, .22);

  /* ---------- Disposition ---------- */
  --mp-content-max: 1340px;
  --mp-sidebar-w: 248px;
  --mp-breakpoint-mobile: 900px; /* sous cette largeur : nav en bas */
}