/*==================================================
  FILTROSPURIFICADORESDEAGUA.COM
  VARIABLES GLOBALES
  Version 2.0
==================================================*/

:root{

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

    --color-primary:#0A6FAE;
    --color-primary-dark:#075887;
    --color-primary-light:#EAF6FC;

    --color-secondary:#009B72;
    --color-secondary-dark:#007B5A;
    --color-secondary-light:#EAFBF6;

    --color-accent:#F5B400;

    --color-success:#22C55E;
    --color-warning:#F59E0B;
    --color-danger:#DC2626;
    --color-info:#2563EB;


    /*==================================================
      ESCALA DE GRISES
    ==================================================*/

    --white:#FFFFFF;

    --gray-50:#F9FAFB;
    --gray-100:#F3F4F6;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;
    --gray-400:#9CA3AF;
    --gray-500:#6B7280;
    --gray-600:#4B5563;
    --gray-700:#374151;
    --gray-800:#1F2937;
    --gray-900:#111827;

    --black:#000000;


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

    --text-color:var(--gray-800);
    --text-light:var(--gray-600);
    --text-muted:var(--gray-500);

    --heading-color:var(--gray-900);

    --link-color:var(--color-primary);
    --link-hover:var(--color-primary-dark);


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

    --body-bg:#FFFFFF;

    --section-light:#F8FAFC;
    --section-white:#FFFFFF;

    --card-bg:#FFFFFF;

    --footer-bg:#0F172A;


    /*==================================================
      BORDES
    ==================================================*/

    --border-color:#E5E7EB;

    --border-light:#F1F5F9;


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

    --shadow-xs:0 1px 2px rgba(0,0,0,.04);

    --shadow-sm:0 2px 6px rgba(0,0,0,.06);

    --shadow-md:0 8px 20px rgba(0,0,0,.08);

    --shadow-lg:0 16px 40px rgba(0,0,0,.10);

    --shadow-xl:0 25px 60px rgba(0,0,0,.15);


    /*==================================================
      BORDES REDONDEADOS
    ==================================================*/

    --radius-xs:4px;

    --radius-sm:8px;

    --radius-md:14px;

    --radius-lg:20px;

    --radius-xl:32px;

    --radius-pill:999px;


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

    --space-xxs:4px;

    --space-xs:8px;

    --space-sm:12px;

    --space-md:20px;

    --space-lg:32px;

    --space-xl:48px;

    --space-2xl:64px;

    --space-3xl:96px;


    /*==================================================
      CONTENEDOR
    ==================================================*/

    --container-width:1240px;

    --container-padding:20px;


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

    --header-height:82px;


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

    --button-height:50px;

    --button-padding:0 28px;


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

    --transition-fast:.20s ease;

    --transition:.30s ease;

    --transition-slow:.45s ease;


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

    --font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --font-size-xs:.75rem;

    --font-size-sm:.875rem;

    --font-size-base:1rem;

    --font-size-md:1.125rem;

    --font-size-lg:1.25rem;

    --font-size-xl:1.5rem;

    --font-size-2xl:2rem;

    --font-size-3xl:2.6rem;

    --font-size-4xl:3.4rem;


    /*==================================================
      PESOS
    ==================================================*/

    --font-light:300;

    --font-normal:400;

    --font-medium:500;

    --font-semibold:600;

    --font-bold:700;

    --font-extrabold:800;


    /*==================================================
      ALTURA DE LÍNEA
    ==================================================*/

    --line-height-tight:1.2;

    --line-height:1.6;

    --line-height-loose:1.9;


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

    --z-header:900;

    --z-dropdown:950;

    --z-modal:9999;

}