/* ============================================================
   variables.css — Tokens del design system (DESIGN.md)
   ============================================================ */

:root {
  /* ——— Colores ——— */
  --color-primary: #43A047;
  --color-primary-hover: #388E3C;

  --color-secondary: #3B82F6;
  --color-secondary-hover: #2563EB;

  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;

  --color-text-primary: #1F2937;
  --color-text-secondary: #6B7280;

  --color-border: #E5E7EB;

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* — Tipografía — */
  --font-family: 'Inter', Arial, Helvetica, sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --line-height: 1.5;

  /* — Radius — */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 18px;
  --radius-pill: 999px;

  /* — Sombras — */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, .06);
  --shadow-hover: 0 12px 36px rgba(0, 0, 0, .08);

  /* — Spacing (base 8px) — */
  --spacing-0: 0;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 48px;
  --spacing-6: 64px;
  --spacing-7: 80px;
  --spacing-8: 96px;

  /* — Layout — */
  --max-width: 1200px;
  --container-desktop: 32px;
  --container-tablet: 24px;
  --container-mobile: 20px;

  /* — Animación — */
  --duration: 180ms;
  --easing: ease-in-out;
}