/**
 * Design Tokens – Buscador Agrícola
 * Identidad según Figma y carpeta Style/ (Colors, Tipografia, Buttons, Link, Search, Tabs, Input, Cards).
 * Figma: https://www.figma.com/design/IUMF4jjl4Kw3Tt0Y2yTFN2/…?node-id=32-104
 *
 * Único archivo de configuración visual: colores, tipografía, espaciado.
 * Para cambiar identidad: editar aquí o usar Personalizar → Identidad del sitio.
 */

:root {
  /* === Contenedor y espaciado === */
  --ba-container: min(1200px, 100%);
  --ba-gutter: clamp(12px, 4vw, 24px);
  --ba-section-padding-y: clamp(24px, 5vw, 40px);
  --ba-section-gap: 20px;
  --ba-card-gap: 12px;

  /* === Colores primarios (Style/Colors, Buttons) === */
  --ba-primary: #0f6b3f;
  --ba-primary-hover: #0d5a35;
  --ba-primary-active: #0a4a2a;
  --ba-primary-light: #e9f7ef;
  --ba-primary-border: #dbeee3;
  /* Verde acento (card seleccionada, tab activo – Style A4-3, Tab Categorias) */
  --ba-primary-accent: #6ecb36;

  /* === Enlaces (Style/Link) === */
  --ba-link: #5dbe82;
  --ba-link-hover: var(--ba-primary);
  --ba-link-active: #7dd99a;

  /* === Botones: estados deshabilitado (Style/Buttons) === */
  --ba-button-disabled-bg: #e5e7eb;
  --ba-button-disabled-color: #6b7280;

  /* === Inputs (Style/Search, A4-3) === */
  --ba-input-border: #dddddd;
  --ba-input-border-focus: #aaaaaa;
  --ba-input-placeholder: #7a7a7a;
  --ba-input-bg-disabled: #eeeeee;

  /* === Cards (Style A4-3): estado seleccionado === */
  --ba-card-selected-border: var(--ba-primary-accent);

  /* === Tabs (Style Tab Categorias / Tab Empresas) === */
  --ba-tab-inactive-bg: #e8f5e9;
  --ba-tab-active-bg: var(--ba-primary);
  --ba-tab-active-text: #fff;
  --ba-tab-underline: var(--ba-primary);

  /* === Tags categorías (Style/Link) === */
  --ba-tag-green-bg: #e8f8ee;
  --ba-tag-green-text: #1e5e3d;
  --ba-tag-blue-bg: #e0f2f7;
  --ba-tag-blue-text: #1a73e8;
  --ba-tag-orange-bg: #fff0e0;
  --ba-tag-orange-text: #ff9900;
  --ba-tag-brown-bg: #f5efe1;
  --ba-tag-brown-text: #6c6c6c;

  /* === Categorías destacadas (Figma: colores mandatorios por card) === */
  /* Insumos, Servicios, Equipamiento y maquinaria, Terrenos – icono blanco sobre fondo sólido. */
  --ba-cat-icon-green: #6cb53e;        /* Insumos – lime green */
  --ba-cat-icon-blue: #3b6eeb;        /* Servicios – royal blue */
  --ba-cat-icon-equipamiento: #268e3c; /* Equipamiento y maquinaria – forest green */
  --ba-cat-icon-yellow: #c59430;      /* Terrenos – golden/ochre */

  /* === Iconos marca (WhatsApp, etc.) === */
  --ba-whatsapp-green: #25d366;

  /* === Hero oscuro === */
  --ba-hero-bg: #07202b;
  --ba-hero-overlay-start: rgba(7, 32, 43, 0.92);
  --ba-hero-overlay-end: rgba(7, 32, 43, 0.55);
  /* Alturas y espaciado de cabeceras (escala armonizada) */
  --ba-hero-padding-y: clamp(32px, 5vw, 56px);
  --ba-hero-height-primary: clamp(320px, 40vh, 480px);
  --ba-hero-height-page: clamp(240px, 28vh, 320px);
  --ba-hero-height-list: clamp(180px, 22vh, 260px);
  --ba-hero-to-content-gap: clamp(28px, 5vw, 48px);

  /* === Texto === */
  --ba-text-primary: #0f172a;
  --ba-text-secondary: #374151;
  --ba-text-muted: #6b7280;
  --ba-text-on-dark: #fff;
  --ba-text-on-dark-muted: rgba(255, 255, 255, 0.92);

  /* === Identidad secciones === */
  --ba-section-title-color: var(--ba-primary);
  --ba-section-subtitle-color: var(--ba-text-muted);
  --ba-section-intro-color: var(--ba-primary);

  /* === Fondos === */
  --ba-bg-white: #fff;
  --ba-bg-page: #fff;
  --ba-bg-section: #f8fafc;
  /* Galería producto: contenedor principal y miniaturas (evitar gris; identidad unificada) */
  --ba-gallery-placeholder-bg: #fff;
  --ba-bg-footer: #1e5031;
  --ba-banner-green: #d4e8c4;
  --ba-banner-green-text: #1e4620;

  /* === Bordes === */
  --ba-border: #e5e7eb;
  --ba-border-light: rgba(0, 0, 0, 0.08);

  /* === Tipografía (Style/Tipografia – Nunito) === */
  --ba-font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Heading: H1 38px → H5 16px */
  --ba-font-size-h1: clamp(1.75rem, 4vw, 2.375rem);
  --ba-font-size-h2: clamp(1.4rem, 3vw, 2rem);
  --ba-font-size-h3: clamp(1.2rem, 2.5vw, 1.5rem);
  --ba-font-size-h4: clamp(1.1rem, 2vw, 1.25rem);
  --ba-font-size-h5: 1rem;
  /* Subtitle: 22, 20, 16, 14 px */
  --ba-font-size-subtitle-1: 1.375rem;
  --ba-font-size-subtitle-2: 1.25rem;
  --ba-font-size-subtitle-3: 1rem;
  --ba-font-size-subtitle-4: 0.875rem;
  /* Body: 18, 16, 14, 13, 12 px */
  --ba-font-size-body-1: 1.125rem;
  --ba-font-size-body-2: 1rem;
  --ba-font-size-body-3: 0.875rem;
  --ba-font-size-body-4: 0.8125rem;
  --ba-font-size-body-5: 0.75rem;
  /* Alias (compatibilidad) */
  --ba-font-size-body: 1rem;
  --ba-font-size-small: 0.875rem;
  --ba-font-size-label: 0.8125rem;
  --ba-line-height-tight: 1.2;
  --ba-line-height-body: 1.5;
  --ba-line-height-relaxed: 1.6;
  --ba-font-weight-regular: 400;
  --ba-font-weight-semibold: 600;
  --ba-font-weight-bold: 700;
  --ba-font-weight-extrabold: 800;
  --ba-title-size: clamp(1.25rem, 3vw, 1.5rem);
  --ba-subtitle-size: clamp(0.85rem, 2vw, 0.95rem);

  /* === Radios y sombras (Style: esquinas redondeadas consistentes) === */
  --ba-radius-sm: 4px;
  --ba-radius-md: 6px;
  --ba-radius-lg: 8px;
  --ba-radius-xl: 12px;
  --ba-radius-pill: 999px;
  --ba-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
  --ba-shadow-card-hover: 0 4px 12px rgba(15, 107, 63, 0.15);

  /* === Móvil / touch === */
  --ba-touch-target: 48px;
  --ba-title-size-mobile: clamp(1.15rem, 5vw, 1.4rem);
  --ba-subtitle-size-mobile: clamp(0.875rem, 2.5vw, 1rem);

  /* === Breakpoints (referencia para media queries y JS; en CSS usar el valor numérico hasta soporte var() en @media) === */
  --ba-bp-xs: 420px;
  --ba-bp-sm: 480px;
  --ba-bp-md: 768px;
  --ba-bp-lg: 1024px;
  --ba-bp-xl: 1280px;
}

@media (max-width: 480px) {
  :root {
    --ba-gutter: 16px;
  }
}