/*
 * Design tokens — design system Dimagi / CommCare HQ.
 * Valeurs figees par le handoff : ne pas ajuster a la main dans les
 * composants, toujours passer par ces variables.
 */

:root {
  /* --- Couleurs de marque ------------------------------------------------ */
  --deep-purple: #16006D;      /* titres, marque, boutons primaires sombres */
  --cornflower: #5D70D2;       /* primaire CommCare */
  --cornflower-hover: #4A5AA8;
  --indigo-connect: #3843D0;
  --marigold: #FEAF31;         /* accent, soulignement du sous-onglet actif */

  /* --- Texte ------------------------------------------------------------- */
  --text-body: #5F6A7D;
  --text-secondary: #6C757D;
  --text-tertiary: #ADB5BD;

  /* --- Statuts ----------------------------------------------------------- */
  --success: #358623;
  --success-bg: #D9ECD4;
  --success-fg: #1E4F12;

  --danger: #E13019;
  --danger-dark: #8F1F0F;
  --danger-row: #FAD8D4;

  --warning: #EEAE00;
  --warning-bg: #FCEFCC;
  --warning-fg: #7A5800;
  --warning-fg-strong: #8A6100;

  --neutral-bg: #E9ECEF;
  --neutral-fg: #495057;

  --running-bg: #DFE2F6;
  --running-fg: #252D54;

  --indigo-100: #DFE2F6;

  /* --- Surfaces ---------------------------------------------------------- */
  --page-bg: #F8F9FA;
  --surface: #FFFFFF;
  --hairline: #DEE2E6;
  --field-border: #CED4DA;
  --rail: #E9ECEF;

  /* --- Typographie ------------------------------------------------------- */
  --font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Espacements (base 4 px) ------------------------------------------- */
  --gap-cell: 12px;
  --gap-grid: 14px;
  --gap-section: 18px;
  --pad-card: 20px;
  --pad-page: 20px 24px 32px;

  /* --- Rayons ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;   /* boutons, champs */
  --radius-md: 12px;  /* cartes */
  --radius-pill: 999px;

  /* --- Ombres (teintees violet, jamais de noir pur) ---------------------- */
  --shadow-card: 0 1px 2px rgba(22, 0, 109, .06);
  --shadow-toast: 0 8px 20px rgba(22, 0, 109, .24);

  /* --- Mouvement --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 200ms;

  /* --- Focus ------------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(93, 112, 210, .35);
}