/* ============================================================
   Support Chain — Design System · Foundations
   colors_and_type.css — tokens couleur + typographie
   Palette : harmonie verte raffinée (réf. Figma validée client)
   ============================================================ */

:root {
  /* ── BRAND / PRIMARY ─────────────────────────────────────── */
  --emerald:        #03C3A2;   /* primaire — accent, actions, "OK" */
  --emerald-600:    #02A98C;   /* hover / pressed */
  --emerald-400:    #3FD3B6;   /* accent clair */
  --forest:         #004E42;   /* vert profond — séries sombres, emphase */
  --forest-700:     #0E3A30;   /* vert encre (titres verts) */

  /* ── GREENS — ramp séquentiel (charts, fonds doux) ───────── */
  --sage-50:        #F1F8E9;
  --sage-100:       #E0F2D0;   /* pilules période, badges +% */
  --sage-200:       #C7E8B8;
  --mint-soft:      #D6F0E6;   /* fonds teintés emerald */

  /* ── NIVEAUX — identité catégorielle N1→N3 (ramp vert) ───── */
  --lvl-n1:         #9FD8A6;   /* clair */
  --lvl-n1p:        #2FC9A4;   /* emerald */
  --lvl-n2:         #138A72;   /* teal profond */
  --lvl-n3:         #004E42;   /* forest */
  --lvl-n1-soft:    #EAF6E6;
  --lvl-n1p-soft:   #DAF4EC;
  --lvl-n2-soft:    #D4ECE5;
  --lvl-n3-soft:    #D5E4E0;

  /* ── NEUTRES (gris froid) ────────────────────────────────── */
  --page:           #F2F4F3;
  --card:           #FFFFFF;
  --line:           #ECEFEE;   /* séparateurs fins */
  --border:         #E4E8E6;   /* bordures de cards */
  --track:          #E6E7E7;   /* pistes vides (barres/jauges) */
  --ink-900:        #19211E;   /* titres — quasi-noir */
  --ink-700:        #2C3A34;
  --ink-600:        #5C6862;   /* corps */
  --ink-400:        #94A09A;   /* labels / muted */
  --gray-500:       #9BA6A4;   /* séries inactives */

  /* ── SÉMANTIQUE (statut — réservé KPI / états) ───────────── */
  --ok:             #0E9E7E;   /* positif (texte sur clair) */
  --ok-bg:          #DEF0CE;   /* badge positif */
  --ok-fg:          #1F7A52;
  --warn:           #FBC02D;   /* vigilance — ambre */
  --warn-bg:        #FDF3D6;
  --warn-fg:        #9A6A12;
  --alert:          #E2554B;   /* alerte / breach — rouge harmonisé */
  --alert-bg:       #FBE7E4;
  --alert-fg:       #B23A33;

  /* ── FLUX (diagramme — direction) ────────────────────────── */
  --flow-up:        #2C3A34;   /* escalade ↑ (graphite, neutre/forward) */
  --flow-down:      #FBC02D;   /* renvoi ↓ (ambre) */
  --flow-transv:    #E2554B;   /* transversal / saut (rouge) */

  /* ── ÉLÉVATION ───────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(16,40,32,.04);
  --shadow:     0 1px 2px rgba(16,40,32,.04), 0 10px 30px -18px rgba(16,40,32,.16);
  --shadow-md:  0 8px 28px -12px rgba(16,40,32,.20);
  --shadow-pop: 0 18px 50px -12px rgba(16,40,32,.28);

  /* ── RAYONS ──────────────────────────────────────────────── */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ── ESPACEMENTS (échelle 4px) ───────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;

  /* ── TYPOGRAPHIE ─────────────────────────────────────────── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* échelle type (taille / line-height / weight) */
  --t-display: 700 34px/1.05 var(--font);   /* gros chiffres KPI */
  --t-h1:      700 24px/1.2  var(--font);
  --t-h2:      700 19px/1.25 var(--font);
  --t-h3:      600 15.5px/1.3 var(--font);
  --t-body:    500 14px/1.55 var(--font);
  --t-body-sb: 600 14px/1.5  var(--font);
  --t-small:   500 12.5px/1.45 var(--font);
  --t-label:   600 11px/1.3  var(--font);   /* + uppercase + .07em */
  --t-mono:    600 12.5px/1.4 var(--font-mono);
}

/* ── Styles sémantiques réutilisables ──────────────────────── */
.ds-h1 { font: var(--t-h1); letter-spacing: -.02em; color: var(--ink-900); }
.ds-h2 { font: var(--t-h2); letter-spacing: -.01em; color: var(--ink-900); }
.ds-h3 { font: var(--t-h3); color: var(--ink-900); }
.ds-display { font: var(--t-display); letter-spacing: -.03em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.ds-body { font: var(--t-body); color: var(--ink-600); }
.ds-small { font: var(--t-small); color: var(--ink-400); }
.ds-label { font: var(--t-label); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); }
.ds-mono { font: var(--t-mono); color: var(--ink-600); }
.tnum { font-variant-numeric: tabular-nums; }