/*
 * WABEP Agro - Design Tokens
 * Variables CSS reutilizables. NO hardcodear valores en otros stylesheets:
 * usar siempre var(--token-name).
 *
 * Paleta inspirada en pulsoplanta.com: verde profundo + dorado.
 */

:root {
  /* COLORES PRIMARIOS (verde pulsoplanta) */
  --color-primary: #1F4A1F;          /* verde profundo institucional */
  --color-primary-dark: #133013;     /* verde casi negro para hovers */
  --color-primary-light: #2D5016;    /* verde mid (legacy compatibility) */

  /* DORADO */
  --color-secondary: #D4AF37;        /* dorado principal */
  --color-secondary-dark: #B8941F;   /* dorado oscuro */
  --color-secondary-light: #E8C865;  /* dorado claro */

  /* ACENTO VERDE */
  --color-accent: #5CB85C;
  --color-accent-dark: #4CAF50;

  /* NEUTRALS */
  --color-white: #FFFFFF;
  --color-dark: #1A1A1A;
  --color-dark-soft: #2C3E50;
  --color-gray-medium: #6C757D;
  --color-gray-light: #F7F8F4;       /* tinte verdoso muy sutil */
  --color-gray-border: #E5E7E0;
  --color-cream: #FAF7EE;             /* fondo cremoso para acentos */

  /* SEMÁNTICOS */
  --color-success: #27AE60;
  --color-warning: #F39C12;
  --color-error: #E74C3C;
  --color-info: #3498DB;

  /* GRADIENTES */
  --gradient-primary: linear-gradient(135deg, #1F4A1F 0%, #133013 100%);
  --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #B8941F 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(19, 48, 19, 0.55) 0%, rgba(0, 0, 0, 0.65) 100%);

  /* TIPOGRAFÍA */
  --font-headlines: 'Poppins', 'Inter', sans-serif;
  --font-body: 'Roboto', 'Open Sans', sans-serif;

  /* SPACING */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-3xl: 96px;

  /* BORDER RADIUS */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* SHADOWS */
  --shadow-sm: 0 1px 3px rgba(19, 48, 19, 0.08);
  --shadow-md: 0 4px 12px rgba(19, 48, 19, 0.10);
  --shadow-lg: 0 12px 24px rgba(19, 48, 19, 0.12);
  --shadow-xl: 0 20px 40px rgba(19, 48, 19, 0.15);
  --shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.25);

  /* TRANSITIONS */
  --transition-fast: all 0.2s ease-in-out;
  --transition-normal: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease-in-out;

  /* CONTAINER */
  --container-max: 1200px;
  --container-wide: 1400px;
}