/* =====================================================
   Agrocasares — CSS Variables & Reset
   ===================================================== */

:root {
  /* Brand — se pueden sobreescribir desde config */
  --c-primary: #1B6B3A;
  --c-primary-light: #22894A;
  --c-primary-dark: #145230;
  --c-accent: #F59E0B;
  --c-accent-light: #FBBF24;

  /* Neutrals */
  --c-bg: #FAFAF9;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F5F5F4;
  --c-border: #E7E5E4;
  --c-border-light: #F0EEEC;
  --c-text: #1C1917;
  --c-text-secondary: #78716C;
  --c-text-muted: #A8A29E;

  /* Status */
  --c-success: #16A34A;
  --c-warning: #EAB308;
  --c-error: #DC2626;
  --c-info: #2563EB;

  /* Spacing */
  --s-xs: 0.25rem;
  --s-sm: 0.5rem;
  --s-md: 1rem;
  --s-lg: 1.5rem;
  --s-xl: 2rem;
  --s-2xl: 3rem;
  --s-3xl: 4rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.16);

  /* Fonts */
  --f-display: 'DM Sans', system-ui, sans-serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
  --f-mono: 'DM Mono', monospace;

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --max-w: 1200px;
  --header-h: 60px;
}

/* =====================================================
   Reset
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, select, textarea { font: inherit; border: none; outline: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; }

/* =====================================================
   Utilities
   ===================================================== */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-md); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--s-sm); }
.gap-md { gap: var(--s-md); }
.gap-lg { gap: var(--s-lg); }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: var(--c-text-muted); }
.text-secondary { color: var(--c-text-secondary); }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn var(--t-slow) both; }
.fade-in-delay-1 { animation-delay: 100ms; }
.fade-in-delay-2 { animation-delay: 200ms; }
.fade-in-delay-3 { animation-delay: 300ms; }