/* Helpify — Spacing, radius, elevation. Escala base 4px. */
:root {
  /* Espaciado (escala 4px) */
  --hf-space-1: 4px;
  --hf-space-2: 8px;
  --hf-space-3: 12px;
  --hf-space-4: 16px;
  --hf-space-5: 24px;
  --hf-space-6: 32px;
  --hf-space-7: 48px;
  --hf-space-8: 64px;

  /* Radio de borde */
  --hf-radius-sm: 6px;
  --hf-radius-md: 12px;
  --hf-radius-lg: 20px;
  --hf-radius-full: 9999px;

  /* Elevación — tono Rich Black a baja opacidad (nunca negro puro) */
  --hf-shadow-sm: 0 1px 2px rgba(7, 8, 22, 0.08);
  --hf-shadow-md: 0 4px 12px rgba(7, 8, 22, 0.10);
  --hf-shadow-lg: 0 12px 32px rgba(7, 8, 22, 0.14);
  --hf-shadow-focus: 0 0 0 3px rgba(220, 231, 94, 0.55);  /* anillo Pear */

  /* Aliases semánticos */
  --radius-control: var(--hf-radius-md);
  --radius-card:    var(--hf-radius-lg);
  --radius-pill:    var(--hf-radius-full);
  --elevation-card: var(--hf-shadow-md);
}