:root {
    /* === System Colors === */
    --blue-light: #007AFF;
    --blue-dark: #0A84FF;
    --blue-contrast-light: #0040DD;
    --blue-contrast-dark: #409CFF;

    --green-light: #34C759;
    --green-dark: #30D158;
    --green-contrast-light: #248A3D;
    --green-contrast-dark: #30DB5B;

    --indigo-light: #5856D6;
    --indigo-dark: #5E5CE6;
    --indigo-contrast-light: #3634A3;
    --indigo-contrast-dark: #7D7AFF;

    --orange-light: #FF9500;
    --orange-dark: #FF9F0A;
    --orange-contrast-light: #C93400;
    --orange-contrast-dark: #FFB340;

    --pink-light: #FF2D55;
    --pink-dark: #FF375F;
    --pink-contrast-light: #D30F45;
    --pink-contrast-dark: #FF6482;

    --purple-light: #AF52DE;
    --purple-dark: #BF5AF2;
    --purple-contrast-light: #8944AB;
    --purple-contrast-dark: #DA8FFF;

    --red-light: #FF3B30;
    --red-dark: #FF453A;
    --red-contrast-light: #D70015;
    --red-contrast-dark: #FF6961;

    --teal-light: #5AC8FA;
    --teal-dark: #64D2FF;
    --teal-contrast-light: #0071A4;
    --teal-contrast-dark: #70D7FF;

    --yellow-light: #FFCC00;
    --yellow-dark: #FFD60A;
    --yellow-contrast-light: #B36200;
    --yellow-contrast-dark: #FFD426;

    --gray-light: #8E8E93;
    --gray-dark: #8E8E93;
    --gray-contrast-light: #6C6C70;
    --gray-contrast-dark: #AEAEB2;

    --gray2-light: #AEAEB2;
    --gray2-dark: #636366;
    --gray2-contrast-light: #8E8E93;
    --gray2-contrast-dark: #7C7C80;

    --gray3-light: #C7C7CC;
    --gray3-dark: #48484A;
    --gray3-contrast-light: #AEAEB2;
    --gray3-contrast-dark: #545456;

    --gray4-light: #D1D1D6;
    --gray4-dark: #3A3A3C;
    --gray4-contrast-light: #BCBCC0;
    --gray4-contrast-dark: #444446;

    --gray5-light: #E5E5EA;
    --gray5-dark: #2C2C2E;
    --gray5-contrast-light: #D8D8DC;
    --gray5-contrast-dark: #363638;

    --gray6-light: #F2F2F7;
    --gray6-dark: #1C1C1E;
    --gray6-contrast-light: #EBEBF0;
    --gray6-contrast-dark: #242426;

    /* === Background Colors === */
    --background-light: #FFFFFF;
    --background-dark: #000000;
    --background-contrast-light: #FFFFFF;
    --background-contrast-dark: #000000;

    --secondary-background-light: #F2F2F7;
    --secondary-background-dark: #1C1C1E;
    --secondary-background-contrast-light: #EBEBF0;
    --secondary-background-contrast-dark: #242426;

    --tertiary-background-light: #FFFFFF;
    --tertiary-background-dark: #2C2C2E;
    --tertiary-background-contrast-light: #FFFFFF;
    --tertiary-background-contrast-dark: #363638;

    --grouped-background-light: #F2F2F7;
    --grouped-background-dark: #000000;
    --grouped-background-contrast-light: #EBEBF0;
    --grouped-background-contrast-dark: #000000;

    --secondary-grouped-background-light: #FFFFFF;
    --secondary-grouped-background-dark: #1C1C1E;
    --secondary-grouped-background-contrast-light: #FFFFFF;
    --secondary-grouped-background-contrast-dark: #242426;

    --tertiary-grouped-background-light: #F2F2F7;
    --tertiary-grouped-background-dark: #2C2C2E;
    --tertiary-grouped-background-contrast-light: #EBEBF0;
    --tertiary-grouped-background-contrast-dark: #363638;

    /* === Fills === */
    --fill-light: #78788033;
    --fill-dark: #7878805C;
    --fill-contrast-light: #78788047;
    --fill-contrast-dark: #78788070;

    --secondary-fill-light: #78788028;
    --secondary-fill-dark: #78788051;
    --secondary-fill-contrast-light: #7878803D;
    --secondary-fill-contrast-dark: #78788066;

    --tertiary-fill-light: #7676801E;
    --tertiary-fill-dark: #7676803D;
    --tertiary-fill-contrast-light: #76768033;
    --tertiary-fill-contrast-dark: #76768051;

    --quaternary-fill-light: #74748014;
    --quaternary-fill-dark: #7676802E;
    --quaternary-fill-contrast-light: #74748028;
    --quaternary-fill-contrast-dark: #76768042;

    /* === TEXTS === */
    --light-text-light: #FFFFFF99;
    --light-text-dark: #FFFFFF99;
    --light-text-contrast-light: #FFFFFF99;
    --light-text-contrast-dark: #FFFFFF99;

    --dark-text-light: #000000;
    --dark-text-dark: #000000;
    --dark-text-contrast-light: #000000;
    --dark-text-contrast-dark: #000000;

    /* === Label Colors === */
    --label-light: #000000;
    --label-dark: #FFFFFF;
    --label-contrast-light: #000000;
    --label-contrast-dark: #FFFFFF;

    --secondary-label-light: #3C3C4399;
    --secondary-label-dark: #EBEBF599;
    --secondary-label-contrast-light: #3C3C43CC;
    --secondary-label-contrast-dark: #EBEBF5B3;

    --tertiary-label-light: #3C3C434C;
    --tertiary-label-dark: #EBEBF54C;
    --tertiary-label-contrast-light: #3C3C43B3;
    --tertiary-label-contrast-dark: #EBEBF58C;

    --quaternary-label-light: #3C3C432E;
    --quaternary-label-dark: #EBEBF52E;
    --quaternary-label-contrast-light: #3C3C438C;
    --quaternary-label-contrast-dark: #EBEBF566;

    /* === Link === */
    --link-light: #007AFF;
    --link-dark: #0984FF;
    --link-contrast-light: #007AFF;
    --link-contrast-dark: #0984FF;

    /* === Placeholder Text === */
    --placeholder-text-light: #3C3C434C;
    --placeholder-text-dark: #EBEBF54C;
    --placeholder-text-contrast-light: #3C3C43B3;
    --placeholder-text-contrast-dark: #EBEBF58C;

    /* === SEPARATOR === */
    --separator-light: #3C3C434A;
    --separator-dark: #54545899;
    --separator-contrast-light: #3C3C435E;
    --separator-contrast-dark: #545458AE;

    --opaque-separator-light: #C6C6C8;
    --opaque-separator-dark: #38383A;
    --opaque-separator-contrast-light: #C6C6C8;
    --opaque-separator-contrast-dark: #38383A;
}

/* ===== BLUE ===== */
.text-blue-light {
    color: var(--blue-light);
}

.text-blue-dark {
    color: var(--blue-dark);
}

.text-blue-contrast-light {
    color: var(--blue-contrast-light);
}

.text-blue-contrast-dark {
    color: var(--blue-contrast-dark);
}

.background-blue-light {
    background-color: var(--blue-light);
}

.background-blue-dark {
    background-color: var(--blue-dark);
}

.background-blue-contrast-light {
    background-color: var(--blue-contrast-light);
}

.background-blue-contrast-dark {
    background-color: var(--blue-contrast-dark);
}

/* ===== GREEN ===== */
.text-green-light {
    color: var(--green-light);
}

.text-green-dark {
    color: var(--green-dark);
}

.text-green-contrast-light {
    color: var(--green-contrast-light);
}

.text-green-contrast-dark {
    color: var(--green-contrast-dark);
}

.background-green-light {
    background-color: var(--green-light);
}

.background-green-dark {
    background-color: var(--green-dark);
}

.background-green-contrast-light {
    background-color: var(--green-contrast-light);
}

.background-green-contrast-dark {
    background-color: var(--green-contrast-dark);
}

/* ===== INDIGO ===== */
.text-indigo-light {
    color: var(--indigo-light);
}

.text-indigo-dark {
    color: var(--indigo-dark);
}

.text-indigo-contrast-light {
    color: var(--indigo-contrast-light);
}

.text-indigo-contrast-dark {
    color: var(--indigo-contrast-dark);
}

.background-indigo-light {
    background-color: var(--indigo-light);
}

.background-indigo-dark {
    background-color: var(--indigo-dark);
}

.background-indigo-contrast-light {
    background-color: var(--indigo-contrast-light);
}

.background-indigo-contrast-dark {
    background-color: var(--indigo-contrast-dark);
}

/* ===== ORANGE ===== */
.text-orange-light {
    color: var(--orange-light);
}

.text-orange-dark {
    color: var(--orange-dark);
}

.text-orange-contrast-light {
    color: var(--orange-contrast-light);
}

.text-orange-contrast-dark {
    color: var(--orange-contrast-dark);
}

.background-orange-light {
    background-color: var(--orange-light);
}

.background-orange-dark {
    background-color: var(--orange-dark);
}

.background-orange-contrast-light {
    background-color: var(--orange-contrast-light);
}

.background-orange-contrast-dark {
    background-color: var(--orange-contrast-dark);
}

/* ===== PINK ===== */
.text-pink-light {
    color: var(--pink-light);
}

.text-pink-dark {
    color: var(--pink-dark);
}

.text-pink-contrast-light {
    color: var(--pink-contrast-light);
}

.text-pink-contrast-dark {
    color: var(--pink-contrast-dark);
}

.background-pink-light {
    background-color: var(--pink-light);
}

.background-pink-dark {
    background-color: var(--pink-dark);
}

.background-pink-contrast-light {
    background-color: var(--pink-contrast-light);
}

.background-pink-contrast-dark {
    background-color: var(--pink-contrast-dark);
}

/* ===== PURPLE ===== */
.text-purple-light {
    color: var(--purple-light);
}

.text-purple-dark {
    color: var(--purple-dark);
}

.text-purple-contrast-light {
    color: var(--purple-contrast-light);
}

.text-purple-contrast-dark {
    color: var(--purple-contrast-dark);
}

.background-purple-light {
    background-color: var(--purple-light);
}

.background-purple-dark {
    background-color: var(--purple-dark);
}

.background-purple-contrast-light {
    background-color: var(--purple-contrast-light);
}

.background-purple-contrast-dark {
    background-color: var(--purple-contrast-dark);
}

/* ===== RED ===== */
.text-red-light {
    color: var(--red-light);
}

.text-red-dark {
    color: var(--red-dark);
}

.text-red-contrast-light {
    color: var(--red-contrast-light);
}

.text-red-contrast-dark {
    color: var(--red-contrast-dark);
}

.background-red-light {
    background-color: var(--red-light);
}

.background-red-dark {
    background-color: var(--red-dark);
}

.background-red-contrast-light {
    background-color: var(--red-contrast-light);
}

.background-red-contrast-dark {
    background-color: var(--red-contrast-dark);
}

/* ===== TEAL ===== */
.text-teal-light {
    color: var(--teal-light);
}

.text-teal-dark {
    color: var(--teal-dark);
}

.text-teal-contrast-light {
    color: var(--teal-contrast-light);
}

.text-teal-contrast-dark {
    color: var(--teal-contrast-dark);
}

.background-teal-light {
    background-color: var(--teal-light);
}

.background-teal-dark {
    background-color: var(--teal-dark);
}

.background-teal-contrast-light {
    background-color: var(--teal-contrast-light);
}

.background-teal-contrast-dark {
    background-color: var(--teal-contrast-dark);
}

/* ===== YELLOW ===== */
.text-yellow-light {
    color: var(--yellow-light);
}

.text-yellow-dark {
    color: var(--yellow-dark);
}

.text-yellow-contrast-light {
    color: var(--yellow-contrast-light);
}

.text-yellow-contrast-dark {
    color: var(--yellow-contrast-dark);
}

.background-yellow-light {
    background-color: var(--yellow-light);
}

.background-yellow-dark {
    background-color: var(--yellow-dark);
}

.background-yellow-contrast-light {
    background-color: var(--yellow-contrast-light);
}

.background-yellow-contrast-dark {
    background-color: var(--yellow-contrast-dark);
}

/* ===== GRAY ===== */
.text-gray-light {
    color: var(--gray-light);
}

.text-gray-dark {
    color: var(--gray-dark);
}

.text-gray-contrast-light {
    color: var(--gray-contrast-light);
}

.text-gray-contrast-dark {
    color: var(--gray-contrast-dark);
}

.background-gray-light {
    background-color: var(--gray-light);
}

.background-gray-dark {
    background-color: var(--gray-dark);
}

.background-gray-contrast-light {
    background-color: var(--gray-contrast-light);
}

.background-gray-contrast-dark {
    background-color: var(--gray-contrast-dark);
}

/* ===== GRAY2 ===== */
.text-gray2-light {
    color: var(--gray2-light);
}

.text-gray2-dark {
    color: var(--gray2-dark);
}

.text-gray2-contrast-light {
    color: var(--gray2-contrast-light);
}

.text-gray2-contrast-dark {
    color: var(--gray2-contrast-dark);
}

.background-gray2-light {
    background-color: var(--gray2-light);
}

.background-gray2-dark {
    background-color: var(--gray2-dark);
}

.background-gray2-contrast-light {
    background-color: var(--gray2-contrast-light);
}

.background-gray2-contrast-dark {
    background-color: var(--gray2-contrast-dark);
}

/* ===== GRAY3 ===== */
.text-gray3-light {
    color: var(--gray3-light);
}

.text-gray3-dark {
    color: var(--gray3-dark);
}

.text-gray3-contrast-light {
    color: var(--gray3-contrast-light);
}

.text-gray3-contrast-dark {
    color: var(--gray3-contrast-dark);
}

.background-gray3-light {
    background-color: var(--gray3-light);
}

.background-gray3-dark {
    background-color: var(--gray3-dark);
}

.background-gray3-contrast-light {
    background-color: var(--gray3-contrast-light);
}

.background-gray3-contrast-dark {
    background-color: var(--gray3-contrast-dark);
}

/* ===== GRAY4 ===== */
.text-gray4-light {
    color: var(--gray4-light);
}

.text-gray4-dark {
    color: var(--gray4-dark);
}

.text-gray4-contrast-light {
    color: var(--gray4-contrast-light);
}

.text-gray4-contrast-dark {
    color: var(--gray4-contrast-dark);
}

.background-gray4-light {
    background-color: var(--gray4-light);
}

.background-gray4-dark {
    background-color: var(--gray4-dark);
}

.background-gray4-contrast-light {
    background-color: var(--gray4-contrast-light);
}

.background-gray4-contrast-dark {
    background-color: var(--gray4-contrast-dark);
}

/* ===== GRAY5 ===== */
.text-gray5-light {
    color: var(--gray5-light);
}

.text-gray5-dark {
    color: var(--gray5-dark);
}

.text-gray5-contrast-light {
    color: var(--gray5-contrast-light);
}

.text-gray5-contrast-dark {
    color: var(--gray5-contrast-dark);
}

.background-gray5-light {
    background-color: var(--gray5-light);
}

.background-gray5-dark {
    background-color: var(--gray5-dark);
}

.background-gray5-contrast-light {
    background-color: var(--gray5-contrast-light);
}

.background-gray5-contrast-dark {
    background-color: var(--gray5-contrast-dark);
}

/* ===== GRAY6 ===== */
.text-gray6-light {
    color: var(--gray6-light);
}

.text-gray6-dark {
    color: var(--gray6-dark);
}

.text-gray6-contrast-light {
    color: var(--gray6-contrast-light);
}

.text-gray6-contrast-dark {
    color: var(--gray6-contrast-dark);
}

.background-gray6-light {
    background-color: var(--gray6-light);
}

.background-gray6-dark {
    background-color: var(--gray6-dark);
}

.background-gray6-contrast-light {
    background-color: var(--gray6-contrast-light);
}

.background-gray6-contrast-dark {
    background-color: var(--gray6-contrast-dark);
}