/* ============================================================
   ui.css — Primitives partagées (sur tokens.css)
   ============================================================
   Couche manquante du design-system : des classes RÉUTILISABLES
   construites SUR les tokens (espace/rayon/type/ombre de tokens.css),
   pour remplacer les inline-styles + valeurs magiques éparpillés.

   Namespace `ui-` (les `.btn`/`.card` existants sont scopés sous
   .view-kickoff / .roas-app — on ne les touche pas).

   Principes :
     · #5 type — serif = titres/chiffres héros, mono = labels, sans = corps
     · #7 espace/élévation — grille 4/8, ombre douce > bordure dure
   Utilisable par React (className) ET les outils vanilla.
   ============================================================ */

/* ─── Layout utils (grille 4/8 via tokens) ─── */
.ui-stack { display: flex; flex-direction: column; }
.ui-row { display: flex; align-items: center; }
.ui-wrap { flex-wrap: wrap; }
.ui-gap-1 { gap: var(--space-1); }
.ui-gap-2 { gap: var(--space-2); }
.ui-gap-3 { gap: var(--space-3); }
.ui-gap-4 { gap: var(--space-4); }
.ui-grow { flex: 1; min-width: 0; }

/* ─── Card — élévation douce plutôt que bordure dure (#7) ─── */
.ui-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  box-sizing: border-box;
}
.ui-card-lg { padding: var(--space-6); }

/* ─── Labels & chiffres (#5) ─── */
.ui-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-48);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.ui-stat-value {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
}
.ui-stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-48);
}

/* ─── Badge ─── */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink-8);
  color: var(--ink-76);
  line-height: 1.4;
}
.ui-badge svg { width: 13px; height: 13px; }

/* ─── Button (token-based, namespacé) ─── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-84);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--motion-fast) var(--easing-default),
    border-color var(--motion-fast) var(--easing-default),
    color var(--motion-fast) var(--easing-default);
}
.ui-btn:hover { border-color: var(--ink-32); background: var(--depth); }
.ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ui-btn-primary { background: var(--fg); color: var(--surface); border-color: var(--fg); }
.ui-btn-primary:hover { background: var(--ink-84); border-color: var(--ink-84); }
.ui-btn-ghost { border-color: transparent; background: transparent; color: var(--ink-64); }
.ui-btn-ghost:hover { background: var(--ink-8); border-color: transparent; }
.ui-btn-sm { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); }
.ui-btn svg { width: 16px; height: 16px; }

/* ─── Icône (baseline d'alignement) ─── */
.ui-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }