:root {
  --gray-background-color: rgb(249, 249, 249);
  --announcement-bar-color: rgb(240, 240, 240);
  --text-color: black;
  --text-background-color: white;
  --label-color: rgba(0, 0, 0, 0.85);
  --secondary-label-color: rgba(0, 0, 0, 0.5);
  --tertiary-label-color: rgba(0, 0, 0, 0.25);
  --quaternary-label-color: rgba(0, 0, 0, 0.1);
  --quinary-label-color: rgba(0, 0, 0, 0.05);
  --grid-color: rgb(204, 204, 204);
  --separator-color: rgb(230, 230, 230);
  --alternating-content-background-color: rgb(245, 245, 245);
  --link-color: rgb(0, 104, 218);
  --control-accent-color: rgb(0, 122, 255);
  --keyboard-focus-indicator-color: rgb(141, 180, 251);
  --light-color-opacity: 0.06;
  --medium-color-opacity: 0.14;
  --system-red-color: rgb(235, 77, 61);
  --system-red-color-medium: rgba(235, 77, 61, var(--medium-color-opacity));
  --system-red-color-light: rgba(235, 77, 61, var(--light-color-opacity));
  --system-green-color: rgb(100, 202, 86);
  --system-green-color-medium: rgb(100, 202, 86, var(--medium-color-opacity));
  --system-green-color-light: rgb(100, 202, 86, var(--light-color-opacity));
  --system-blue-color: rgb(0, 122, 255);
  --system-blue-color-medium: rgb(0, 122, 255, var(--medium-color-opacity));
  --system-blue-color-light: rgb(0, 122, 255, var(--light-color-opacity));
  --system-orange-color: rgb(240, 154, 56);
  --system-orange-color-medium: rgb(240, 154, 56, var(--medium-color-opacity));
  --system-orange-color-light: rgb(240, 154, 56, var(--light-color-opacity));
  --system-yellow-color: rgb(247, 206, 70);
  --system-yellow-color-medium: rgb(247, 206, 70, var(--medium-color-opacity));
  --system-yellow-color-light: rgb(247, 206, 70, var(--light-color-opacity));
  --system-brown-color: rgb(157, 134, 98);
  --system-brown-color-medium: rgb(157, 134, 98, var(--medium-color-opacity));
  --system-brown-color-light: rgb(157, 134, 98, var(--light-color-opacity));
  --system-pink-color: rgb(235, 68, 90);
  --system-pink-color-medium: rgb(235, 68, 90, var(--medium-color-opacity));
  --system-pink-color-light: rgb(235, 68, 90, var(--light-color-opacity));
  --system-purple-color: rgb(163, 87, 215);
  --system-purple-color-medium: rgb(163, 87, 215, var(--medium-color-opacity));
  --system-purple-color-light: rgb(163, 87, 215, var(--light-color-opacity));
  --system-teal-color: rgb(110, 171, 193);
  --system-teal-color-medium: rgb(110, 171, 193, var(--medium-color-opacity));
  --system-teal-color-light: rgb(110, 171, 193, var(--light-color-opacity));
  --system-indigo-color: rgb(87, 86, 207);
  --system-indigo-color-medium: rgb(87, 86, 207, var(--medium-color-opacity));
  --system-indigo-color-light: rgb(87, 86, 207, var(--light-color-opacity));
  --system-mint-color: rgb(90, 196, 189);
  --system-mint-color-medium: rgb(90, 196, 189, var(--medium-color-opacity));
  --system-mint-color-light: rgb(90, 196, 189, var(--light-color-opacity));
  --system-cyan-color: rgb(112, 188, 235);
  --system-cyan-color-medium: rgb(112, 188, 235, var(--medium-color-opacity));
  --system-cyan-color-light: rgb(112, 188, 235, var(--light-color-opacity));
  --system-gray-color: rgb(142, 142, 147);
  --system-gray-color-medium: rgb(142, 142, 147, var(--medium-color-opacity));
  --system-gray-color-light: rgb(142, 142, 147, var(--light-color-opacity));
}

@media (prefers-color-scheme: dark) {
  :root {
    --gray-background-color: rgb(42, 42, 42);
    --announcement-bar-color: rgb(50, 50, 50);
    --text-color: white;
    --text-background-color: rgb(30, 30, 30);
    --label-color: rgba(255, 255, 255, 0.85);
    --secondary-label-color: rgba(255, 255, 255, 0.5);
    --tertiary-label-color: rgba(255, 255, 255, 0.25);
    --quaternary-label-color: rgba(255, 255, 255, 0.1);
    --quinary-label-color: rgba(255, 255, 255, 0.05);
    --grid-color: rgb(88, 88, 88);
    --separator-color: rgb(51, 52, 55);
    --alternating-content-background-color: rgb(44, 44, 44);
    --link-color: rgb(65, 156, 255);
    --keyboard-focus-indicator-color: rgb(156, 212, 255);
    --light-color-opacity: 0.07;
    --medium-color-opacity: 0.08;
    --system-red-color: rgb(235, 85, 69);
    --system-red-color-medium: rgb(235, 85, 69, var(--medium-color-opacity));
    --system-red-color-light: rgb(235, 85, 69, var(--light-color-opacity));
    --system-green-color: rgb(106, 212, 95);
    --system-green-color-medium: rgb(106, 212, 95, var(--medium-color-opacity));
    --system-green-color-light: rgb(106, 212, 95, var(--light-color-opacity));
    --system-blue-color: rgb(58, 130, 247);
    --system-blue-color-medium: rgb(58, 130, 247, var(--medium-color-opacity));
    --system-blue-color-light: rgb(58, 130, 247, var(--light-color-opacity));
    --system-orange-color: rgb(242, 164, 60);
    --system-orange-color-medium: rgb(242, 164, 60, var(--medium-color-opacity));
    --system-orange-color-light: rgb(242, 164, 60, var(--light-color-opacity));
    --system-yellow-color: rgb(248, 216, 74);
    --system-yellow-color-medium: rgb(248, 216, 74, var(--medium-color-opacity));
    --system-yellow-color-light: rgb(248, 216, 74, var(--light-color-opacity));
    --system-brown-color: rgb(167, 144, 108);
    --system-brown-color-medium: rgb(167, 144, 108, var(--medium-color-opacity));
    --system-brown-color-light: rgb(167, 144, 108, var(--light-color-opacity));
    --system-pink-color: rgb(235, 75, 99);
    --system-pink-color-medium: rgb(235, 75, 99, var(--medium-color-opacity));
    --system-pink-color-light: rgb(235, 75, 99, var(--light-color-opacity));
    --system-purple-color: rgb(179, 96, 234);
    --system-purple-color-medium: rgb(179, 96, 234, var(--medium-color-opacity));
    --system-purple-color-light: rgb(179, 96, 234, var(--light-color-opacity));
    --system-teal-color: rgb(128, 194, 217);
    --system-teal-color-medium: rgb(128, 194, 217, var(--medium-color-opacity));
    --system-teal-color-light: rgb(128, 194, 217, var(--light-color-opacity));
    --system-indigo-color: rgb(93, 92, 222);
    --system-indigo-color-medium: rgb(93, 92, 222, var(--medium-color-opacity));
    --system-indigo-color-light: rgb(93, 92, 222, var(--light-color-opacity));
    --system-mint-color: rgb(134, 227, 225);
    --system-mint-color-medium: rgb(134, 227, 225, var(--medium-color-opacity));
    --system-mint-color-light: rgb(134, 227, 225, var(--light-color-opacity));
    --system-cyan-color: rgb(119, 197, 241);
    --system-cyan-color-medium: rgb(119, 197, 241, var(--medium-color-opacity));
    --system-cyan-color-light: rgb(119, 197, 241, var(--light-color-opacity));
    --system-gray-color: rgb(152, 152, 157);
    --system-gray-color-medium: rgb(152, 152, 157, var(--medium-color-opacity));
    --system-gray-color-light: rgb(152, 152, 157, var(--light-color-opacity));
  }
}

/* MARK: System color icon filters */

img.icon.system-gray {
    filter: invert(56%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-gray {
        filter: invert(60%);
    }
}

img.icon.system-mint {
    filter: invert(62%) sepia(40%) saturate(4269%) hue-rotate(136deg) brightness(98%) contrast(101%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-mint {
        filter: invert(73%) sepia(98%) saturate(213%) hue-rotate(120deg) brightness(87%) contrast(92%);
    }
}

img.icon.system-purple {
    filter: invert(49%) sepia(65%) saturate(5025%) hue-rotate(253deg) brightness(93%) contrast(87%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-purple {
        filter: invert(52%) sepia(58%) saturate(5803%) hue-rotate(251deg) brightness(102%) contrast(90%);
    }
}

img.icon.system-cyan {
    filter: invert(66%) sepia(54%) saturate(688%) hue-rotate(169deg) brightness(98%) contrast(93%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-cyan {
        filter: invert(57%) sepia(43%) saturate(617%) hue-rotate(152deg) brightness(99%) contrast(94%);
    }
}

img.icon.system-blue {
    filter: invert(30%) sepia(75%) saturate(3588%) hue-rotate(202deg) brightness(105%) contrast(103%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-blue {
        filter: invert(42%) sepia(87%) saturate(3654%) hue-rotate(196deg) brightness(101%) contrast(102%);
    }
}

img.icon.system-orange {
    filter: invert(57%) sepia(91%) saturate(2143%) hue-rotate(2deg) brightness(106%) contrast(103%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-orange {
        filter: invert(75%) sepia(37%) saturate(5884%) hue-rotate(353deg) brightness(107%) contrast(103%);
    }
}

img.icon.system-red {
    filter: invert(29%) sepia(60%) saturate(2505%) hue-rotate(342deg) brightness(103%) contrast(100%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-red {
        filter: invert(33%) sepia(41%) saturate(2593%) hue-rotate(336deg) brightness(108%) contrast(101%);
    }
}

img.icon.system-pink {
    filter: invert(38%) sepia(87%) saturate(5219%) hue-rotate(332deg) brightness(102%) contrast(101%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-pink {
        filter: invert(31%) sepia(81%) saturate(2188%) hue-rotate(328deg) brightness(101%) contrast(101%);
    }
}

img.icon.system-green {
    filter: invert(69%) sepia(18%) saturate(1919%) hue-rotate(76deg) brightness(90%) contrast(94%);
}

@media (prefers-color-scheme: dark) {
    img.icon.system-green {
        filter: invert(64%) sepia(98%) saturate(407%) hue-rotate(72deg) brightness(91%) contrast(90%);
    }
}