/* Paleta de Colores SKF */

/* ============================================
   COLORES PRIMARIOS
   ============================================ */
:root {
    /* Primarios */
    --color-brand-blue: #0000FE;
    --color-black: #000000;
    --color-white: #ffffff;

    /* Secundarios - Azules */
    --color-dark-blue: #02115c;
    --color-light-blue: #ccdcff;

    /* Secundarios - Grises */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DC;
    --color-gray-400: #99A1AF;
    --color-gray-500: #6A7282;
    --color-gray-600: #4A5565;
    --color-gray-700: #364153;
    --color-gray-800: #1E2939;
    --color-gray-900: #101828;
    --color-gray-950: #030712;

    /* Terciarios - Colores Base */
    --color-orange: #f86516;
    --color-yellow: #ffd601;
    --color-pink: #f857af;
    --color-green: #009e2d;
    --color-purple: #9570eb;
    --color-red: #F93434;
    --color-turquoise: #3c99ae;

    /* Terciarios - Colores Oscuros */
    --color-dark-orange: #9c3600;
    --color-dark-yellow: #7a6c00;
    --color-dark-pink: #98105a;
    --color-dark-green: #00611b;
    --color-dark-purple: #4c0e9b;
    --color-dark-red: #930606;
    --color-dark-turquoise: #276770;

    /* Accent - Colores al 25% */
    --color-blue-25: #ccdcff;
    --color-orange-25: #fdd8c5;
    --color-yellow-25: #fdf6bf;
    --color-pink-25: #fdd5e9;
    --color-green-25: #bfe7ca;
    --color-purple-25: #e8d6ff;
    --color-red-25: #fdcccc;
    --color-turquoise-25: #d9f2f0;
}

/* ============================================
   CLASES DE UTILIDAD PARA COLORES DE FONDO
   ============================================ */

/* Primarios */
.bg-brand-blue { background-color: var(--color-brand-blue) !important; }
.bg-black { background-color: var(--color-black) !important; }
.bg-white { background-color: var(--color-white) !important; }

/* Secundarios - Azules */
.bg-dark-blue { background-color: var(--color-dark-blue) !important; }
.bg-light-blue { background-color: var(--color-light-blue) !important; }

/* Secundarios - Grises */
.bg-gray-50 { background-color: var(--color-gray-50) !important; }
.bg-gray-100 { background-color: var(--color-gray-100) !important; }
.bg-gray-200 { background-color: var(--color-gray-200) !important; }
.bg-gray-300 { background-color: var(--color-gray-300) !important; }
.bg-gray-400 { background-color: var(--color-gray-400) !important; }
.bg-gray-500 { background-color: var(--color-gray-500) !important; }
.bg-gray-600 { background-color: var(--color-gray-600) !important; }
.bg-gray-700 { background-color: var(--color-gray-700) !important; }
.bg-gray-800 { background-color: var(--color-gray-800) !important; }
.bg-gray-900 { background-color: var(--color-gray-900) !important; }
.bg-gray-950 { background-color: var(--color-gray-950) !important; }

/* Terciarios - Colores Base */
.bg-orange { background-color: var(--color-orange) !important; }
.bg-yellow { background-color: var(--color-yellow) !important; }
.bg-pink { background-color: var(--color-pink) !important; }
.bg-green { background-color: var(--color-green) !important; }
.bg-purple { background-color: var(--color-purple) !important; }
.bg-red { background-color: var(--color-red) !important; }
.bg-turquoise { background-color: var(--color-turquoise) !important; }

/* Terciarios - Colores Oscuros */
.bg-dark-orange { background-color: var(--color-dark-orange) !important; }
.bg-dark-yellow { background-color: var(--color-dark-yellow) !important; }
.bg-dark-pink { background-color: var(--color-dark-pink) !important; }
.bg-dark-green { background-color: var(--color-dark-green) !important; }
.bg-dark-purple { background-color: var(--color-dark-purple) !important; }
.bg-dark-red { background-color: var(--color-dark-red) !important; }
.bg-dark-turquoise { background-color: var(--color-dark-turquoise) !important; }

/* Accent - Colores al 25% */
.bg-blue-25 { background-color: var(--color-blue-25) !important; }
.bg-orange-25 { background-color: var(--color-orange-25) !important; }
.bg-yellow-25 { background-color: var(--color-yellow-25) !important; }
.bg-pink-25 { background-color: var(--color-pink-25) !important; }
.bg-green-25 { background-color: var(--color-green-25) !important; }
.bg-purple-25 { background-color: var(--color-purple-25) !important; }
.bg-red-25 { background-color: var(--color-red-25) !important; }
.bg-turquoise-25 { background-color: var(--color-turquoise-25) !important; }

/* ============================================
   CLASES DE UTILIDAD PARA COLORES DE TEXTO
   ============================================ */

/* Primarios */
.text-brand-blue { color: var(--color-brand-blue) !important; }
.text-black { color: var(--color-black) !important; }
.text-white { color: var(--color-white) !important; }

/* Secundarios - Azules */
.text-dark-blue { color: var(--color-dark-blue) !important; }
.text-light-blue { color: var(--color-light-blue) !important; }

/* Secundarios - Grises */
.text-gray-50 { color: var(--color-gray-50) !important; }
.text-gray-100 { color: var(--color-gray-100) !important; }
.text-gray-200 { color: var(--color-gray-200) !important; }
.text-gray-300 { color: var(--color-gray-300) !important; }
.text-gray-400 { color: var(--color-gray-400) !important; }
.text-gray-500 { color: var(--color-gray-500) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }
.text-gray-800 { color: var(--color-gray-800) !important; }
.text-gray-900 { color: var(--color-gray-900) !important; }
.text-gray-950 { color: var(--color-gray-950) !important; }

/* Terciarios - Colores Base */
.text-orange { color: var(--color-orange) !important; }
.text-yellow { color: var(--color-yellow) !important; }
.text-pink { color: var(--color-pink) !important; }
.text-green { color: var(--color-green) !important; }
.text-purple { color: var(--color-purple) !important; }
.text-red { color: var(--color-red) !important; }
.text-turquoise { color: var(--color-turquoise) !important; }

/* Terciarios - Colores Oscuros */
.text-dark-orange { color: var(--color-dark-orange) !important; }
.text-dark-yellow { color: var(--color-dark-yellow) !important; }
.text-dark-pink { color: var(--color-dark-pink) !important; }
.text-dark-green { color: var(--color-dark-green) !important; }
.text-dark-purple { color: var(--color-dark-purple) !important; }
.text-dark-red { color: var(--color-dark-red) !important; }
.text-dark-turquoise { color: var(--color-dark-turquoise) !important; }

/* Accent - Colores al 25% */
.text-blue-25 { color: var(--color-blue-25) !important; }
.text-orange-25 { color: var(--color-orange-25) !important; }
.text-yellow-25 { color: var(--color-yellow-25) !important; }
.text-pink-25 { color: var(--color-pink-25) !important; }
.text-green-25 { color: var(--color-green-25) !important; }
.text-purple-25 { color: var(--color-purple-25) !important; }
.text-red-25 { color: var(--color-red-25) !important; }
.text-turquoise-25 { color: var(--color-turquoise-25) !important; }

/* ============================================
   CLASES DE UTILIDAD PARA BORDES
   ============================================ */

/* Primarios */
.border-brand-blue { border-color: var(--color-brand-blue) !important; }
.border-black { border-color: var(--color-black) !important; }
.border-white { border-color: var(--color-white) !important; }

/* Secundarios - Azules */
.border-dark-blue { border-color: var(--color-dark-blue) !important; }
.border-light-blue { border-color: var(--color-light-blue) !important; }

/* Secundarios - Grises */
.border-gray-50 { border-color: var(--color-gray-50) !important; }
.border-gray-100 { border-color: var(--color-gray-100) !important; }
.border-gray-200 { border-color: var(--color-gray-200) !important; }
.border-gray-300 { border-color: var(--color-gray-300) !important; }
.border-gray-400 { border-color: var(--color-gray-400) !important; }
.border-gray-500 { border-color: var(--color-gray-500) !important; }
.border-gray-600 { border-color: var(--color-gray-600) !important; }
.border-gray-700 { border-color: var(--color-gray-700) !important; }
.border-gray-800 { border-color: var(--color-gray-800) !important; }
.border-gray-900 { border-color: var(--color-gray-900) !important; }
.border-gray-950 { border-color: var(--color-gray-950) !important; }

/* Terciarios - Colores Base */
.border-orange { border-color: var(--color-orange) !important; }
.border-yellow { border-color: var(--color-yellow) !important; }
.border-pink { border-color: var(--color-pink) !important; }
.border-green { border-color: var(--color-green) !important; }
.border-purple { border-color: var(--color-purple) !important; }
.border-red { border-color: var(--color-red) !important; }
.border-turquoise { border-color: var(--color-turquoise) !important; }

/* Terciarios - Colores Oscuros */
.border-dark-orange { border-color: var(--color-dark-orange) !important; }
.border-dark-yellow { border-color: var(--color-dark-yellow) !important; }
.border-dark-pink { border-color: var(--color-dark-pink) !important; }
.border-dark-green { border-color: var(--color-dark-green) !important; }
.border-dark-purple { border-color: var(--color-dark-purple) !important; }
.border-dark-red { border-color: var(--color-dark-red) !important; }
.border-dark-turquoise { border-color: var(--color-dark-turquoise) !important; }

/* Accent - Colores al 25% */
.border-blue-25 { border-color: var(--color-blue-25) !important; }
.border-orange-25 { border-color: var(--color-orange-25) !important; }
.border-yellow-25 { border-color: var(--color-yellow-25) !important; }
.border-pink-25 { border-color: var(--color-pink-25) !important; }
.border-green-25 { border-color: var(--color-green-25) !important; }
.border-purple-25 { border-color: var(--color-purple-25) !important; }
.border-red-25 { border-color: var(--color-red-25) !important; }
.border-turquoise-25 { border-color: var(--color-turquoise-25) !important; }