:root {
    /* Principales */
    --Primary-100: #064350;
    --Primary-50: #086378;
    /* Complementarios */
    --Green-10: #BAD431;
    --Yellow-100: #FBEC14;
    --Orange-100: #F49020;
    --Orange-40: #FFCD34;
    --Jade-50: #00AE8B;
    /* Derivados principales */
    --Primary-2: #E4EDEF;
    --Primary-Dim: #042C34;
    /* Gradientes principales */
    --Primary-Gradient-01: linear-gradient(90deg, #086378 0%, #064350 100%);
    --Primary-Gradient-02: linear-gradient(90deg, #086378 0%, #064350 100%);
    --Primary-Gradient-03: conic-gradient(from 156.32deg at 0.17% 0%, #064350 -12.19deg, #00AE8B 47.3deg, #037A6F 296.92deg, #064350 347.81deg, #00AE8B 407.3deg);

    --Primary-Gradient-04: linear-gradient(135deg, #00AE8B 0%, #1C1D1D 100%);
    --Gray-Gradient-01: linear-gradient(90deg, #878787 0%, #1C1D1D 100%);
    /* DarkMode */
    --Dark-1: #171923;
    --Dark-2: #212330;
    --Dark-3: #2A2D3D;
    --Dark-4: #4D526D;
    /* Bases - Grises */
    --Gray-00: #FCFCFC;
    --Gray-05: #F7F7F7;
    --Gray-10: #F2F2F2;
    --Gray-20: #E7EBED;
    --Gray-30: #E0E3E4;
    --Gray-35: #D6D6D6;
    --Gray-55: #ACB0B2;
    --Gray-60: #959899;
    --Gray-65: #7C7F80;
    --Gray-70: #5D5D5D;
    --Gray-75: #4B4B4B;
    --Gray-80: #343434;
    --Gray-83: #2A2C2E;
    --Gray-85: #1B1D1F;
    --Gray-90: #16181A;
    /* Transparencias generales */
    --Primary-50-10: rgba(8, 99, 120, 0.1);
    --Primary-50-20: rgba(8, 99, 120, 0.2);
    --Gray-transparencia-00: rgba(252, 252, 252, 0.03);
    --Gray-transparencia-05: rgba(247, 247, 247, 0.05);
    --Gray-transparencia-10: rgba(242, 242, 242, 0.07);
    --Gray-transparencia-25: rgba(226, 226, 226, 0.2);
    --Gray-transparencia-50: rgba(220, 223, 226, 0.5);
    --Gray-transparencia-55: rgba(27, 29, 31, 0.15);
    /* Info */
    --Info-10: #F3F8FB;
    --Info-85: #5590C6;
    /* Success */
    --Success-10: rgba(34, 197, 94, 0.1);
    --Success-15: #F3FBF9;
    --Success-25: #A4ECB6;
    --Success-60: #44E07E;
    --Success-70: #22C55E;
    --Success-75: #36B966;
    --Success-80: #169745;
    --Success-90: #048132;
    /* Warning */
    --Warning-10: rgba(244, 144, 32, 0.1);
    --Warning-25: #FBF1E6;
    --Warning-60: #F3AE39;
    --Warning-90: #F59E0B;
    /* Error */
    --Error-25: #FFF8F8;
    --Error-35: #FFE6E6;
    --Error-40: #FF8D8D;
    --Error-60: #CF2525;
    --Error-90: #470404;
    
}

.Primary-100 { color: var(--Primary-100); }
.Primary-50 { color: var(--Primary-50); }

/* Complementarios */
.Green-10 { color: var(--Green-10); }
.Yellow-100 { color: var(--Yellow-100); }
.Orange-100 { color: var(--Orange-100); }
.Orange-40 { color: var(--Orange-40); }
.Jade-50 { color: var(--Jade-50); }

/* Derivados principales */
.Primary-2 { color: var(--Primary-2); }
.Primary-Dim { color: var(--Primary-Dim); }

/* Gradientes principales */
.Primary-Gradient-01 { color: var(--Primary-Gradient-01); }
.Primary-Gradient-02 { color: var(--Primary-Gradient-02); }
.Primary-Gradient-03 { color: var(--Primary-Gradient-03); }
.Primary-Gradient-04 { color: var(--Primary-Gradient-04); }
.Gray-Gradient-01 { color: var(--Gray-Gradient-01); }

/* DarkMode */
.Dark-1 { color: var(--Dark-1); }
.Dark-2 { color: var(--Dark-2); }
.Dark-3 { color: var(--Dark-3); }
.Dark-4 { color: var(--Dark-4); }

/* Bases - Grises */
.Gray-00 { color: var(--Gray-00); }
.Gray-05 { color: var(--Gray-05); }
.Gray-10 { color: var(--Gray-10); }
.Gray-20 { color: var(--Gray-20); }
.Gray-30 { color: var(--Gray-30); }
.Gray-35 { color: var(--Gray-35); }
.Gray-55 { color: var(--Gray-55); }
.Gray-60 { color: var(--Gray-60); }
.Gray-65 { color: var(--Gray-65); }
.Gray-70 { color: var(--Gray-70); }
.Gray-75 { color: var(--Gray-75); }
.Gray-80 { color: var(--Gray-80); }
.Gray-83 { color: var(--Gray-83); }
.Gray-85 { color: var(--Gray-85); }
.Gray-90 { color: var(--Gray-90); }

/* Transparencias generales */
.Primary-50-10 { color: var(--Primary-50-10); }
.Primary-50-20 { color: var(--Primary-50-20); }
.Gray-transparencia-00 { color: var(--Gray-transparencia-00); }
.Gray-transparencia-05 { color: var(--Gray-transparencia-05); }
.Gray-transparencia-10 { color: var(--Gray-transparencia-10); }
.Gray-transparencia-25 { color: var(--Gray-transparencia-25); }
.Gray-transparencia-50 { color: var(--Gray-transparencia-50); }
.Gray-transparencia-55 { color: var(--Gray-transparencia-55); }

/* Info */
.Info-10 { color: var(--Info-10); }
.Info-85 { color: var(--Info-85); }

/* Success */
.Success-10 { color: var(--Success-10); }
.Success-15 { color: var(--Success-15); }
.Success-25 { color: var(--Success-25); }
.Success-60 { color: var(--Success-60); }
.Success-70 { color: var(--Success-70); }
.Success-75 { color: var(--Success-75); }
.Success-80 { color: var(--Success-80); }
.Success-90 { color: var(--Success-90); }

/* Warning */
.Warning-10 { color: var(--Warning-10); }
.Warning-25 { color: var(--Warning-25); }
.Warning-60 { color: var(--Warning-60); }
.Warning-90 { color: var(--Warning-90); }

/* Error */
.Error-25 { color: var(--Error-25); }
.Error-35 { color: var(--Error-35); }
.Error-40 { color: var(--Error-40); }
.Error-60 { color: var(--Error-60); }
.Error-90 { color: var(--Error-90); }

/*Background Color*/
.bg-Primary-100 { background-color: var(--Primary-100); }
.bg-Primary-50 { background-color: var(--Primary-50); }

/* Complementarios */
.bg-Green-10 { background-color: var(--Green-10); }
.bg-Yellow-100 { background-color: var(--Yellow-100); }
.bg-Orange-100 { background-color: var(--Orange-100); }
.bg-Orange-40 { background-color: var(--Orange-40); }
.bg-Jade-50 { background-color: var(--Jade-50); }

/* Derivados principales */
.bg-Primary-2 { background-color: var(--Primary-2); }
.bg-Primary-Dim { background-color: var(--Primary-Dim); }

/* Gradientes principales */
.bg-Primary-Gradient-01 { background: var(--Primary-Gradient-01); }
.bg-Primary-Gradient-02 { background: var(--Primary-Gradient-02); }
.bg-Primary-Gradient-03 { background: var(--Primary-Gradient-03); }
.bg-Primary-Gradient-04 { background: var(--Primary-Gradient-04); }
.bg-Gray-Gradient-01 { background: var(--Gray-Gradient-01); }

/* DarkMode */
.bg-Dark-1 { background-color: var(--Dark-1); }
.bg-Dark-2 { background-color: var(--Dark-2); }
.bg-Dark-3 { background-color: var(--Dark-3); }
.bg-Dark-4 { background-color: var(--Dark-4); }

/* Bases - Grises */
.bg-Gray-00 { background-color: var(--Gray-00); }
.bg-Gray-05 { background-color: var(--Gray-05); }
.bg-Gray-10 { background-color: var(--Gray-10); }
.bg-Gray-20 { background-color: var(--Gray-20); }
.bg-Gray-30 { background-color: var(--Gray-30); }
.bg-Gray-35 { background-color: var(--Gray-35); }
.bg-Gray-55 { background-color: var(--Gray-55); }
.bg-Gray-60 { background-color: var(--Gray-60); }
.bg-Gray-65 { background-color: var(--Gray-65); }
.bg-Gray-70 { background-color: var(--Gray-70); }
.bg-Gray-75 { background-color: var(--Gray-75); }
.bg-Gray-80 { background-color: var(--Gray-80); }
.bg-Gray-83 { background-color: var(--Gray-83); }
.bg-Gray-85 { background-color: var(--Gray-85); }
.bg-Gray-90 { background-color: var(--Gray-90); }

/* Transparencias generales */
.bg-Primary-50-10 { background-color: var(--Primary-50-10); }
.bg-Primary-50-20 { background-color: var(--Primary-50-20); }
.bg-Gray-transparencia-00 { background-color: var(--Gray-transparencia-00); }
.bg-Gray-transparencia-05 { background-color: var(--Gray-transparencia-05); }
.bg-Gray-transparencia-10 { background-color: var(--Gray-transparencia-10); }
.bg-Gray-transparencia-25 { background-color: var(--Gray-transparencia-25); }
.bg-Gray-transparencia-50 { background-color: var(--Gray-transparencia-50); }
.bg-Gray-transparencia-55 { background-color: var(--Gray-transparencia-55); }

/* Info */
.bg-Info-10 { background-color: var(--Info-10); }
.bg-Info-85 { background-color: var(--Info-85); }

/* Success */
.bg-Success-10 { background-color: var(--Success-10); }
.bg-Success-15 { background-color: var(--Success-15); }
.bg-Success-25 { background-color: var(--Success-25); }
.bg-Success-60 { background-color: var(--Success-60); }
.bg-Success-70 { background-color: var(--Success-70); }
.bg-Success-75 { background-color: var(--Success-75); }
.bg-Success-80 { background-color: var(--Success-80); }
.bg-Success-90 { background-color: var(--Success-90); }

/* Warning */
.bg-Warning-10 { background-color: var(--Warning-10); }
.bg-Warning-25 { background-color: var(--Warning-25); }
.bg-Warning-60 { background-color: var(--Warning-60); }
.bg-Warning-90 { background-color: var(--Warning-90); }

/* Error */
.bg-Error-25 { background-color: var(--Error-25); }
.bg-Error-35 { background-color: var(--Error-35); }
.bg-Error-40 { background-color: var(--Error-40); }
.bg-Error-60 { background-color: var(--Error-60); }
.bg-Error-90 { background-color: var(--Error-90); }