/**
 * ============================================================================
 * COLLECTA S.A.S. — DESIGN TOKENS & SISTEMA VISUAL 2026
 * "Collecta es el mercado orgánico que protege el páramo de Subachoque."
 * Cuenta oficial: @collectaorg
 * Actualización 2026 | Basado en el sistema visual original de Diana Hurtado León (2023)
 * ============================================================================
 */

/* 1. TIPOGRAFÍAS OFICIALES (@font-face + Web Fallbacks) */
@font-face {
  font-family: 'Coolvetica';
  src: url('fonts/coolvetica-rg.otf') format('opentype'),
       url('../diseño de marca 2023/coolvetica rg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Coolvetica';
  src: url('fonts/coolvetica-rg-it.otf') format('opentype'),
       url('../diseño de marca 2023/coolvetica rg it.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype'),
       url('../diseño de marca 2023/Gontserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Medium.ttf') format('truetype'),
       url('../diseño de marca 2023/Gontserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
   * 2. PALETA DE COLORES OFICIAL (EXACTA — PROHIBIDO INVENTAR COLORES NUEVOS)
   * ========================================================================== */

  /* --- Colores Primarios --- */
  --color-negro-collecta: #1F1D1E;       /* RGB(31, 29, 30)   | CMYK(74.34, 67.2, 59.19, 79.93) */
  --color-verde-collecta: #829044;       /* RGB(130, 144, 68) | CMYK(53.3, 27.81, 84.47, 11.49) */
  --color-blanco: #FFFFFF;               /* RGB(255, 255, 255)| CMYK(0, 0, 0, 0) */

  /* --- Colores Secundarios --- */
  --color-morado-arandano: #3D3399;      /* RGB(61, 51, 153)  | CMYK(91.45, 86.99, 0, 0) */
  --color-blanco-nieve: #EDEDED;         /* RGB(237, 237, 237)| CMYK(8.43, 5.75, 6.89, 0) */
  --color-habano-ruana: #F2DFBB;         /* RGB(242, 223, 187)| CMYK(6.63, 12.63, 31.46, 0.03) */
  --color-cafe-ruana: #352204;           /* RGB(53, 34, 4)    | CMYK(55.68, 65.15, 79.93, 77.97) */
  --color-cafe-claro: #6B5447;           /* RGB(107, 84, 71)  | CMYK(41.44, 52.54, 56.99, 46.45) */
  --color-campesino: #DFB284;            /* RGB(223, 178, 132)| CMYK(12.65, 32.61, 51.26, 2.14) */
  --color-hoja-gris: #CCCCCC;            /* RGB(204, 204, 204)| CMYK(23.21, 17.06, 18.12, 0.83) */
  --color-verde-monocromatico: #CCCC99;  /* RGB(204, 204, 153)| CMYK(24.99, 12.75, 47.17, 1.02) */

  /* --- Canales RGB para transparencias controladas de la misma paleta --- */
  --rgb-negro-collecta: 31, 29, 30;
  --rgb-verde-collecta: 130, 144, 68;
  --rgb-blanco: 255, 255, 255;
  --rgb-morado-arandano: 61, 51, 153;
  --rgb-blanco-nieve: 237, 237, 237;
  --rgb-habano-ruana: 242, 223, 187;
  --rgb-cafe-ruana: 53, 34, 4;
  --rgb-cafe-claro: 107, 84, 71;
  --rgb-campesino: 223, 178, 132;
  --rgb-hoja-gris: 204, 204, 204;
  --rgb-verde-monocromatico: 204, 204, 153;

  /* ==========================================================================
   * 3. TOKENS SEMÁNTICOS DE INTERFAZ Y REGLA 60-30-10
   * ========================================================================== */
  --bg-dominant-white: var(--color-blanco);            /* 60% Dominante: limpio y luminoso */
  --bg-dominant-warm: var(--color-habano-ruana);       /* 30% Secundario: calidez del páramo */
  --bg-surface-subtle: var(--color-blanco-nieve);      /* Tarjetas neutras / divisores */
  --bg-surface-organic: var(--color-verde-monocromatico);
  --bg-accent-arandano: var(--color-morado-arandano);  /* 10% Acento profundo */
  --bg-accent-verde: var(--color-verde-collecta);      /* 10% Acento orgánico */

  --text-primary: var(--color-negro-collecta);         /* Contraste 16.76:1 sobre blanco */
  --text-warm-heading: var(--color-cafe-ruana);        /* Contraste 15.20:1 sobre blanco */
  --text-secondary: var(--color-cafe-claro);           /* Contraste 7.04:1 sobre blanco */
  --text-inverse: var(--color-blanco);
  --text-inverse-soft: var(--color-blanco-nieve);

  --border-subtle: var(--color-blanco-nieve);
  --border-default: var(--color-hoja-gris);
  --border-warm: var(--color-campesino);
  --border-focus: var(--color-morado-arandano);

  /* ==========================================================================
   * 4. TOKENS POR LÍNEA DE PRODUCTO ORGÁNICO
   * ========================================================================== */
  /* Huevos criollos de libre pastoreo */
  --prod-huevos-bg: var(--color-habano-ruana);
  --prod-huevos-accent: var(--color-campesino);
  --prod-huevos-text: var(--color-cafe-ruana);

  /* Lácteos y Ghee (Queso, Ghee, Yogurt) */
  --prod-lacteos-bg: var(--color-blanco);
  --prod-lacteos-surface: var(--color-habano-ruana);
  --prod-lacteos-accent: var(--color-cafe-claro);
  --prod-lacteos-text: var(--color-negro-collecta);

  /* Mermeladas artesanales y Frutas */
  --prod-mermeladas-bg: var(--color-habano-ruana);
  --prod-mermeladas-accent: var(--color-morado-arandano);
  --prod-mermeladas-text: var(--color-cafe-ruana);

  /* Plántulas, Hortalizas y Verduras orgánicas */
  --prod-hortalizas-bg: var(--color-verde-monocromatico);
  --prod-hortalizas-accent: var(--color-verde-collecta);
  --prod-hortalizas-text: var(--color-cafe-ruana);

  /* Arándanos orgánicos del páramo (cultivo insignia en crecimiento) */
  --prod-arandanos-bg: var(--color-morado-arandano);
  --prod-arandanos-accent: var(--color-verde-collecta);
  --prod-arandanos-text: var(--color-blanco);

  /* ==========================================================================
   * 5. SISTEMA TIPOGRÁFICO Y ALTERNATIVAS WEB SEGURAS
   * ========================================================================== */
  --font-display: 'Coolvetica', 'Plus Jakarta Sans', 'Outfit', 'Arial Rounded MT Bold', sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Escala Tipográfica Web (Desktop / Mobile-first fluid) --- */
  --web-h1-size: clamp(2.5rem, 4.5vw, 3.5rem);         /* 40px -> 56px */
  --web-h1-line: 1.06;
  --web-h1-track: 0.01em;

  --web-h2-size: clamp(1.875rem, 3.2vw, 2.5rem);       /* 30px -> 40px */
  --web-h2-line: 1.12;
  --web-h2-track: 0.01em;

  --web-h3-size: clamp(1.375rem, 2.2vw, 1.75rem);      /* 22px -> 28px */
  --web-h3-line: 1.2;

  --web-body-lg-size: 1.125rem;                        /* 18px */
  --web-body-size: 1rem;                               /* 16px */
  --web-body-line: 1.6;

  --web-label-size: 0.875rem;                          /* 14px */
  --web-caption-size: 0.75rem;                         /* 12px */
  --web-btn-size: 1rem;                                /* 16px */

  /* --- Escala Tipográfica Carrusel Instagram (Lienzo 1080x1350 / 1080x1080) --- */
  --ig-carousel-h1: 76px;                              /* Portada gancho: 72px - 84px */
  --ig-carousel-h2: 52px;                              /* Título de lámina interna: 48px - 56px */
  --ig-carousel-body: 30px;                            /* Cuerpo de lectura móvil: 28px - 32px */
  --ig-carousel-label: 22px;                           /* Etiqueta / numeración: 20px - 24px */
  --ig-carousel-cta: 32px;                             /* Botón / llamado a la acción */

  /* --- Escala Tipográfica Reels & Historias (Lienzo 1080x1920) --- */
  --ig-vertical-hook: 82px;                            /* Titular gancho en portada/2s: 76px - 88px */
  --ig-vertical-h2: 56px;                              /* Subtítulo de sección: 52px - 60px */
  --ig-vertical-subtitle: 42px;                        /* Subtítulos dinámicos de voz: 38px - 44px */
  --ig-vertical-body: 34px;                            /* Texto explicativo en historia: 32px - 36px */
  --ig-vertical-badge: 26px;                           /* Pastilla / sticker de precio o aviso */

  /* ==========================================================================
   * 6. ESPACIADOS, GRILLA, BORDES Y SOMBRAS
   * ========================================================================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */

  --container-max: 1240px;
  --grid-gap-mobile: 16px;
  --grid-gap-desktop: 24px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Sombras cálidas basadas en Café Ruana (#352204) y Negro Collecta (#1F1D1E) */
  --shadow-sm: 0 2px 8px rgba(var(--rgb-cafe-ruana), 0.06);
  --shadow-md: 0 8px 24px rgba(var(--rgb-cafe-ruana), 0.09);
  --shadow-lg: 0 16px 40px rgba(var(--rgb-cafe-ruana), 0.13);
  --shadow-focus: 0 0 0 3px var(--color-habano-ruana), 0 0 0 5px var(--color-morado-arandano);

  --transition-fast: 160ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}