/* =========================================================================
   VARIABLES CORPORATIVAS DE FORIV.CL
   Basadas en análisis del logo físico de la identidad corporativa.
   ========================================================================= */

:root {
  /* =========================================
     PALETA DE COLORES B2B
     ========================================= */
  --color-primary: #EAB308;        /* Dorado/Amarillo Foriv (Llamativo, Botones) */
  --color-primary-hover: #ca8a04;  /* Dorado oscuro para interactividad */
  
  --color-secondary: #111827;      /* Negro/Gris muy oscuro corporativo (Contraste) */
  --color-secondary-light: #1f2937;
  
  --color-bg: #FFFFFF;             /* Blanco absoluto para el fondo principal */
  --color-bg-alt: #F9FAFB;         /* Gris súper claro para tarjetas, inputs y fondos alternos */
  
  --color-text-main: #111827;      /* Texto de lectura (Casi negro para máximo contraste) */
  --color-text-muted: #6B7280;     /* Texto secundario (Gris medio, descripciones) */
  
  --color-wsp: #25D366;            /* Verde oficial del botón de WhatsApp */
  --color-wsp-hover: #1da851;      /* Verde WSP oscuro */

  /* =========================================
     TIPOGRAFÍAS
     ========================================= */
  /* Merriweather: Aporta el tono clásico, serio y elegante del Logo FORIV original */
  --font-heading: 'Merriweather', serif;  
  /* Inter: La tipografía más legible del mundo digital actual para descripciones y catálogo */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif; 

  /* =========================================
     SISTEMA DE ESPACIADO (Escala Modular)
     ========================================= */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 2rem;     /* 32px */
  --space-lg: 4rem;     /* 64px - Separación general de Secciones */
  --space-xl: 6rem;     /* 96px - Márgenes del Hero Section */

  /* =========================================
     BORDES Y SOMBRAS (Profundidad material)
     ========================================= */
  --radius-sm: 4px;
  --radius-md: 8px;     /* Redondeo estándar moderno de tarjetas */
  --radius-lg: 16px;    /* Redondeo amplio (Ej: Widget de wsp) */
  --radius-full: 9999px;/* Para redondos perfectos */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Efecto Flotante para WSP */
}