/* ─────────────────────────────────────────────────────────────────────────
   KARTERA · SPACING, RADII, BORDERS, SHADOWS, MOTION
   Bordes finos en vez de sombras pesadas. Radios suaves (no redondos).
   Transiciones discretas. 4px base grid.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Spacing — 4px base */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Density — row heights for tables/lists */
  --row-compact:    32px;
  --row-default:    40px;
  --row-comfortable: 48px;

  /* Radii — soft, never pill-round on containers. 6px inputs/cards, 8px panels. */
  --radius-xs:  4px;   /* badges, tags                              */
  --radius-sm:  6px;   /* inputs, buttons, cards, cells             */
  --radius-md:  8px;   /* panels, dialogs, large surfaces           */
  --radius-lg:  8px;   /* (alias) large surfaces                    */
  --radius-pill: 999px;/* only avatars / status dots / segmented    */

  /* Borders — hairlines do the work */
  --bw-hair:  1px;
  --bw-thick: 1.5px;
  --border-line: var(--bw-hair) solid var(--border-subtle);

  /* Shadows — barely-there. Elevation = border + faint shadow, no drama. */
  --shadow-none: none;
  --shadow-xs: 0 1px 1px rgba(20,20,18,0.03);
  --shadow-sm: 0 1px 2px rgba(20,20,18,0.05), 0 1px 1px rgba(20,20,18,0.03);
  --shadow-md: 0 4px 12px rgba(20,20,18,0.06), 0 1px 2px rgba(20,20,18,0.04);
  --shadow-panel: -8px 0 24px rgba(20,20,18,0.06);   /* side panel slide-in */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Motion — discreto */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   240ms; /* @kind other */
  --dur-panel:  280ms; /* @kind other */

  /* Layout */
  --sidebar-w:    248px;
  --panel-w:      440px;
  --topbar-h:     52px;
  --container-max: 1440px;
}