:root {
    --lighter-01: rgba(255, 255, 255, 0.01);
    --lighter-02: rgba(255, 255, 255, 0.02);
    --lighter-05: rgba(255, 255, 255, 0.05);
    --lighter-10: rgba(255, 255, 255, 0.1);
    --lighter-20: rgba(255, 255, 255, 0.2);
    --lighter-25: rgba(255, 255, 255, 0.25);
    --lighter-30: rgba(255, 255, 255, 0.3);
    --lighter-40: rgba(255, 255, 255, 0.4);
    --lighter-50: rgba(255, 255, 255, 0.5);
    --lighter-75: rgba(255, 255, 255, 0.75);
}

/* Text classes for lighter shades */
.text-lighter-01 {
    color: var(--lighter-01) !important;
}
.text-lighter-02 {
    color: var(--lighter-02) !important;
}
.text-lighter-05 {
    color: var(--lighter-05) !important;
}
.text-lighter-10 {
    color: var(--lighter-10) !important;
}
.text-lighter-20 {
    color: var(--lighter-20) !important;
}
.text-lighter-25 {
    color: var(--lighter-25) !important;
}
.text-lighter-30 {
    color: var(--lighter-30) !important;
}
.text-lighter-40 {
    color: var(--lighter-40) !important;
}
.text-lighter-50 {
    color: var(--lighter-50) !important;
}
.text-lighter-75 {
    color: var(--lighter-75) !important;
}

/* Background classes for lighter shades */

.bg-lighter-01 {
    background-color: var(--lighter-01) !important;
}
.bg-lighter-02 {
    background-color: var(--lighter-02) !important;
}
.bg-lighter-05 {
    background-color: var(--lighter-05) !important;
}
.bg-lighter-10 {
    background-color: var(--lighter-10) !important;
}
.bg-lighter-20 {
    background-color: var(--lighter-20) !important;
}
.bg-lighter-25 {
    background-color: var(--lighter-25) !important;
}
.bg-lighter-30 {
    background-color: var(--lighter-30) !important;
}
.bg-lighter-40 {
    background-color: var(--lighter-40) !important;
}
.bg-lighter-50 {
    background-color: var(--lighter-50) !important;
}
.bg-lighter-75 {
    background-color: var(--lighter-75) !important;
}

/* Border classes for lighter shades */

.border-lighter-01 {
    border-color: var(--lighter-01) !important;
}
.border-lighter-02 {
    border-color: var(--lighter-02) !important;
}
.border-lighter-05 {
    border-color: var(--lighter-05) !important;
}
.border-lighter-10 {
    border-color: var(--lighter-10) !important;
}
.border-lighter-20 {
    border-color: var(--lighter-20) !important;
}
.border-lighter-25 {
    border-color: var(--lighter-25) !important;
}
.border-lighter-30 {
    border-color: var(--lighter-30) !important;
}
.border-lighter-40 {
    border-color: var(--lighter-40) !important;
}
.border-lighter-50 {
    border-color: var(--lighter-50) !important;
}
.border-lighter-75 {
    border-color: var(--lighter-75) !important;
}