/* Variables CSS - AgroBlock Landing */
/* Tokens de diseño para escalabilidad */

:root {
  /* Colores */
  --color-bg: #f5f5f5;
  --color-bg-card: #ececec;
  --color-text: #0f1117;
  --color-text-muted: #4b5563;
  --color-accent: #16a34a;

  /* Tipografía */
  --font-primary: "Inter", system-ui, sans-serif;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Espaciado */
  --spacing-base: 8px;

  /* Layout */
  --container-max: 1280px;

  /* Breakpoints - mobile-first, usar con min-width en media queries */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/*
 * Breakpoints (valores numéricos para @media)
 * Base: < 640px (mobile)
 * sm: 640px (mobile landscape / phablet)
 * md: 768px (tablet)
 * lg: 1024px (desktop)
 * xl: 1280px (desktop grande)
 */