/* ─────────────────────────────────────────────────────────────────────────
   Tracéo — Espacement, rayons, élévation, mouvement
   Mobile-first PWA : cibles tactiles ≥ 44px, rythme dense mais respirant.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Espacement (base 4px) */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */

  /* Cible tactile minimale (contrainte PWA) */
  --tap-min: 44px;

  /* Rayons — formes rondes joyeuses */
  --r-xs:   6px;
  --r-sm:   9px;
  --r-md:   12px;   /* cartes par défaut */
  --r-lg:   16px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* Élévation — ombres douces et chaudes (jamais dures) */
  --sh-1: 0 1px 2px rgba(40, 25, 20, 0.06), 0 1px 3px rgba(40, 25, 20, 0.05);
  --sh-2: 0 2px 6px rgba(40, 25, 20, 0.07), 0 4px 12px rgba(40, 25, 20, 0.06);
  --sh-3: 0 6px 18px rgba(40, 25, 20, 0.10), 0 12px 32px rgba(40, 25, 20, 0.08);
  --sh-focus: 0 0 0 3px color-mix(in srgb, var(--traceo-red) 28%, transparent);

  /* Mouvement — vif mais discret, jamais de rebond tape-à-l'œil */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* Largeurs de contenu */
  --w-app:    900px;   /* colonne app (mobile-first, centrée au-delà) */
  --w-narrow: 560px;
}

:root[data-theme="dark"] {
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35);
  --sh-3: 0 6px 18px rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.45);
}