/*
 * Proyecto: semillaselpotrero.com
 * Archivo: variables.css
 * Autor: Javier Dávila
 * Fecha creación: 23.09.2025
 * ------------------------------
 * Versión: 0.0.1
 */

/* ==============================
   Fuentes Personalizadas
================================= */
@font-face {
  font-family: "UniNeue";
  src: url("../fonts/UniNeueRegular.ttf") format("truetype");
  font-weight: 400; /* Regular */
  font-style: normal;
}

@font-face {
  font-family: "UniNeue";
  src: url("../fonts/UniNeueBold.ttf") format("truetype");
  font-weight: 700; /* Bold */
  font-style: normal;
}

@font-face {
  font-family: "UniNeue";
  src: url("../fonts/UniNeueHeavy.ttf") format("truetype");
  font-weight: 900; /* Heavy */
  font-style: normal;
}

/* ==============================
   Variables globales
================================= */
:root {
  /* 🎨 Colores de marca */
  --color-brand: #0E6D31; /* Verde institucional principal */
  --color-brand-alt: #77AA2C; /* Verde secundario de marca */

  /* 🌱 Fondos / suaves */
  --color-fondo-claro: #E1EFCA; /* Verde muy pálido para fondos */
  --color-fondo-suave: #CCE2D4; /* Verde pastel claro */
  --color-fondo-alt: #EDEDED;

  /* 🔔 Acciones / acentos */
  --color-alerta: #FCEA10; /* Amarillo vibrante (llamadas de atención) */
  --color-peligro: #DF163E; /* Rojo (errores, alertas, énfasis fuerte) */

  /* 🌿 Verdes secundarios */
  --color-secundario-oscuro: #006837; /* Verde bosque profundo */
  --color-secundario-vivo: #008d36; /* Verde brillante */
  --color-secundario-claro: #8CC63F; /* Verde fresco/limón */

  /* 🔠 Fuentes */
  --color-fuente-principal: #1D1D1B; /* Gris oscuro para texto principal */
  --fuente-base: "UniNeue", Arial, sans-serif;
  --fuente-regular: 400;
  --fuente-bold: 700;
  --fuente-heavy: 900;

  /* 📝 Escala tipográfica fluida */
  --text-xs:   clamp(0.75rem,  1vw, 0.75rem);   /* ~12px */
  --text-sm:   clamp(0.875rem, 1.2vw, 0.875rem);/* ~14px */
  --text-base: clamp(1rem,     1.5vw, 1rem);    /* ~16px */
  --text-md:   clamp(1.125rem, 2vw, 1.125rem);  /* ~18px */
  --text-lg:   clamp(1.25rem,  2.5vw, 1.25rem); /* ~20px */
  --text-xl:   clamp(1.25rem,  3vw, 1.5rem);    /* ~24px */
  --text-xxl:  clamp(1.625rem, 3.5vw, 1.75rem); /* ~28px */
  --text-xxxl: clamp(1.75rem,  4vw, 2rem);      /* ~32px */
  --text-xxxxl:clamp(2rem,     6vw, 3rem);      /* ~48px */
}