/*
Theme Name: Agrovial Sur 2.0
Theme URI: https://agrovialsur.com
Author: Juan Gustavo Perez
Description: Custom theme for Agrovial Sur converted from React.
Version: 2.0
*/

:root {
    /* ═══════════════════════════════════════════
       PALETA PRIMARIA
       ═══════════════════════════════════════════ */
    --primary: 146 50% 36%;
    /* Verde Institucional #2E8B57 */
    --primary-alt: 204 35% 17%;
    /* Azul Institucional #1C2E3A */
    --muted-foreground: 0 0% 29%;
    /* Gris Descriptor #4A4A4A */
    --secondary: 51 100% 48%;
    /* Amarillo Institucional #F6D000 */

    /* ═══════════════════════════════════════════
       PALETA SECUNDARIA
       ═══════════════════════════════════════════ */
    --primary-dark: 154 72% 21%;
    /* Verde Oscuro #0F5C3A */
    --primary-technical: 218 65% 34%;
    /* Azul Técnico #1E488F */
    --background: 66 33% 95%;
    /* Blanco Técnico #F6F7ED */
    --foreground: 240 4% 10%;
    /* Negro Texto #19191B */

    /* ═══════════════════════════════════════════
       COMPONENT COLORS — SEMÁNTICA
       ═══════════════════════════════════════════ */
    --card-foreground: var(--foreground);
    --popover-foreground: var(--foreground);
    --secondary-foreground: var(--foreground);
    --accent: 218 65% 34%;
    /* Azul Técnico para acentos */
    --accent-foreground: 0 0% 100%;
    --muted: 66 33% 92%;
    /* Blanco Técnico más saturado para fondos muted */
    --border: 146 30% 85%;
    /* Borde sutil basado en verde institucional */

    /* ═══════════════════════════════════════════
       GRADIENTS
       ═══════════════════════════════════════════ */
    --gradient-hero: linear-gradient(135deg, hsl(204 35% 17% / 0.95) 0%, hsl(146 50% 36% / 0.85) 100%);
    --gradient-primary: linear-gradient(135deg, hsl(154 72% 21%) 0%, hsl(146 50% 36%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(51 100% 48%) 0%, hsl(46 100% 42%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(66 33% 95%) 100%);

    /* ═══════════════════════════════════════════
       TIPOGRAFÍA INSTITUCIONAL
       ═══════════════════════════════════════════ */
    --font-display: 'Manrope', sans-serif;
    --font-body: 'Manrope', sans-serif;
}

/* ============================================
   JERARQUÍA TIPOGRÁFICA INSTITUCIONAL
   Fuente: Manrope (Google Fonts)
   ============================================ */

/* Base: Todo el sitio usa Manrope */
body {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    /* 140% - Texto corrido */
}

/* H1 – Título Principal
   Manrope 700 | Tracking: +1% | Interlineado: 110%
   Uso: Portadas, secciones principales */
h1,
.font-display.text-4xl,
.font-display.text-5xl,
.font-display.text-6xl {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    line-height: 1.1;
    /* 110% */
}

/* H2 – Subtítulo
   Manrope 600 | Interlineado: 120% */
h2 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.2;
    /* 120% */
}

/* H3 – Subcategorías
   Manrope 600 | Tamaño menor que H2 */
h3 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.25;
}

/* H4, H5, H6 */
h4,
h5,
h6 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.3;
}

/* Texto Corrido
   Manrope 400 | Interlineado: 140%
   Uso: Manual, documentos, web */
p,
li,
td,
th,
blockquote,
figcaption,
.text-muted-foreground,
.leading-relaxed {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    /* 140% */
}

/* Botones / Llamados a Acción
   Manrope 600 | Tracking +2% | Mayúsculas opcional */
a[class*="gradient-primary"],
button,
.filter-btn,
[role="button"],
input[type="submit"],
a[class*="shadow-button"] {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    /* +2% */
}

/* Override Tailwind compiled font-display and font-body */
.font-display {
    font-family: 'Manrope', sans-serif !important;
}

.font-body {
    font-family: 'Manrope', sans-serif !important;
}