/* ========================================================================
   INOFE PREMIUM FRAMEWORK
   Archivo: variables.css
   Versión: 1.0.0
   Descripción:
   Variables globales utilizadas por TODO el Framework Premium.
   ======================================================================== */

:root{

/* ==========================================================
   COLORES PRINCIPALES
   ========================================================== */

--inofe-primary:#E65F0C;
--inofe-primary-hover:#F77721;
--inofe-primary-dark:#C74B00;

--inofe-secondary:#181818;

--inofe-white:#FFFFFF;
--inofe-black:#000000;

--inofe-light:#F8F8F8;

--inofe-gray-50:#FAFAFA;
--inofe-gray-100:#F4F4F4;
--inofe-gray-200:#ECECEC;
--inofe-gray-300:#DDDDDD;
--inofe-gray-400:#C7C7C7;
--inofe-gray-500:#A5A5A5;
--inofe-gray-600:#808080;
--inofe-gray-700:#5F5F5F;
--inofe-gray-800:#333333;
--inofe-gray-900:#1A1A1A;


/* ==========================================================
   COLORES DE TEXTO
   ========================================================== */

--text-primary:#111111;
--text-secondary:#555555;
--text-muted:#777777;
--text-light:#FFFFFF;


/* ==========================================================
   FONDOS
   ========================================================== */

--bg-body:#FFFFFF;

--bg-section:#F8F8F8;

--bg-dark:#111315;

--bg-card:#FFFFFF;

--bg-card-dark:#1A1C1F;


/* ==========================================================
   TIPOGRAFÍA
   ========================================================== */

--font-family:
"Segoe UI",
Inter,
Roboto,
Arial,
sans-serif;

--font-weight-light:300;
--font-weight-normal:400;
--font-weight-medium:500;
--font-weight-semibold:600;
--font-weight-bold:700;
--font-weight-black:800;

--font-size-xs:.75rem;
--font-size-sm:.875rem;
--font-size-md:1rem;
--font-size-lg:1.125rem;
--font-size-xl:1.25rem;

--h1:clamp(2.8rem,5vw,4.6rem);
--h2:clamp(2.1rem,4vw,3.2rem);
--h3:clamp(1.5rem,2.8vw,2.1rem);
--h4:1.35rem;


/* ==========================================================
   CONTENEDORES
   ========================================================== */

--container-sm:960px;

--container-md:1200px;

--container-lg:1320px;

--container-xl:1450px;

--container-xxl:1600px;


/* ==========================================================
   ESPACIADOS
   ========================================================== */

--space-0:0;

--space-xs:.5rem;

--space-sm:1rem;

--space-md:2rem;

--space-lg:4rem;

--space-xl:6rem;

--space-xxl:8rem;


/* ==========================================================
   RADIOS
   ========================================================== */

--radius-sm:8px;

--radius-md:14px;

--radius-lg:22px;

--radius-xl:34px;

--radius-round:999px;


/* ==========================================================
   SOMBRAS
   ========================================================== */

--shadow-xs:
0 2px 8px rgba(0,0,0,.05);

--shadow-sm:
0 6px 20px rgba(0,0,0,.08);

--shadow-md:
0 14px 35px rgba(0,0,0,.12);

--shadow-lg:
0 25px 60px rgba(0,0,0,.18);

--shadow-orange:
0 15px 35px rgba(230,95,12,.22);


/* ==========================================================
   TRANSICIONES
   ========================================================== */

--transition-fast:.20s;

--transition:.35s;

--transition-slow:.60s;


/* ==========================================================
   BOTONES
   ========================================================== */

--button-height:54px;

--button-radius:999px;

--button-padding:0 34px;


/* ==========================================================
   HEADER
   ========================================================== */

--header-height:90px;


/* ==========================================================
   Z-INDEX
   ========================================================== */

--z-dropdown:1000;

--z-header:1050;

--z-overlay:1100;

--z-modal:1200;

--z-loader:9999;


/* ==========================================================
   BREAKPOINTS
   ========================================================== */

--break-mobile:576px;

--break-tablet:768px;

--break-laptop:1024px;

--break-desktop:1200px;

}