/* ============================================================
   TDR — SPACING, RADII, BORDERS, SHADOWS, MOTION
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;   /* card radius */
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  /* Signature: the leaf/lens silhouette of the isotype — two opposite
     corners fully rounded, two square. Used on media, avatars, badges. */
  --radius-leaf:    40px 4px 40px 4px;
  --radius-leaf-sm: 18px 2px 18px 2px;
  --radius-leaf-lg: 96px 6px 96px 6px;

  /* ---- Borders ---- */
  --bw-hairline: 1px;
  --bw-strong:   1.5px;
  --bw-bold:     2px;
  --border-hair: var(--bw-hairline) solid var(--border);

  /* ---- Shadows (soft, warm, low — never neutral grey) ---- */
  --shadow-xs: 0 1px 2px rgba(28,26,23,.05);
  --shadow-sm: 0 2px 6px rgba(28,26,23,.06), 0 1px 2px rgba(28,26,23,.04);
  --shadow-md: 0 10px 26px rgba(28,26,23,.08);
  --shadow-lg: 0 24px 60px rgba(28,26,23,.14);
  --shadow-inset-line: inset 0 0 0 1px var(--tdr-linea);

  /* ---- Focus ---- */
  --focus-ring-width: 3px;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--tdr-campo-tinte-2);

  /* ---- Motion — slow, natural, no bounce on large surfaces ---- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);   /* @kind other */
  --ease-soft: cubic-bezier(.4,0,.2,1);       /* @kind other */
  /* slight overshoot — toggles and checks only */
  --ease-leaf: cubic-bezier(.34,1.4,.64,1);   /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---- Layout ---- */
  --container:    1200px;
  --container-sm: 860px;
  --gutter:       var(--space-6);
}