/* ==========================================================================
   Variables CSS — Tokens de diseño para Herbolario de España
   Todos los colores, sombras, radios, transiciones, tipografía y espaciado
   se definen aquí para mantener coherencia en todo el proyecto.
   ========================================================================== */

:root {
  /* ── Colores principales ── */
  --color-primary: #2D6A4F;
  --color-primary-light: #40916C;
  --color-primary-lighter: #52B788;
  --color-accent: #95D5B2;
  --color-accent-light: #B7E4C7;
  --color-dark: #1B4332;
  --color-darker: #0B2118;
  --color-bg: #F0F7F4;
  --color-bg-alt: #E8F5EE;
  --color-text: #1A1A2E;
  --color-text-light: #4A4A6A;
  --color-text-muted: #7A7A9A;
  --color-white: #FFFFFF;
  --color-error: #E63946;
  --color-warning: #F4A261;
  --color-success: #2D6A4F;
  --color-border: #D1E8D5;

  /* ── Sombras ── */
  --shadow-sm: 0 1px 3px rgba(27, 67, 50, 0.08);
  --shadow-md: 0 4px 12px rgba(27, 67, 50, 0.1);
  --shadow-lg: 0 8px 30px rgba(27, 67, 50, 0.12);
  --shadow-xl: 0 20px 60px rgba(27, 67, 50, 0.15);

  /* ── Radios de borde ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

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

  /* ── Tipografía ── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;

  /* ── Espaciado ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Ancho máximo del contenedor ── */
  --container-max: 720px;
  --container-wide: 960px;
}