:root {
    --colorize-black: none;
    --colorize-white: invert(100%);
    --colorize-ink: invert(11%) sepia(9%) saturate(2411%) hue-rotate(171deg) brightness(89%) contrast(85%);
    --colorize-ink--always-dark: invert(11%) sepia(9%) saturate(2411%) hue-rotate(171deg) brightness(89%) contrast(85%);
    --colorize-inverted-ink: invert(100%);
    --colorize-subtle: invert(69%) sepia(11%) saturate(204%) hue-rotate(169deg) brightness(84%) contrast(86%);
    --colorize-very-subtle: invert(90%) sepia(0%) saturate(0) hue-rotate(0deg) brightness(100%) contrast(85%);
    --colorize-disabled: invert(48%) sepia(6%) saturate(573%) hue-rotate(202deg) brightness(92%) contrast(84%);
    --colorize-border: invert(83%) sepia(50%) saturate(20%) hue-rotate(218deg) brightness(90%) contrast(84%);
    --colorize-red: invert(20%) sepia(60%) saturate(3012%) hue-rotate(357deg) brightness(106%) contrast(111%);
    --colorize-green: invert(50%) sepia(39%) saturate(672%) hue-rotate(88deg) brightness(90%) contrast(101%);
    --colorize-blue: invert(37%) sepia(90%) saturate(6264%) hue-rotate(198deg) brightness(101%) contrast(101%);
    --colorize-mint: invert(94%) sepia(76%) saturate(388%) hue-rotate(86deg) brightness(101%) contrast(101%);
    --colorize-purple: invert(15%) sepia(88%) saturate(6807%) hue-rotate(257deg) brightness(96%) contrast(106%);
    --colorize-orange: invert(59%) sepia(94%) saturate(2285%) hue-rotate(358deg) brightness(100%) contrast(103%);
    --colorize-yellow: invert(73%) sepia(88%) saturate(335%) hue-rotate(357deg) brightness(97%) contrast(99%);
    --colorize-gold: invert(56%) sepia(8%) saturate(3330%) hue-rotate(5deg) brightness(102%) contrast(89%);
    --colorize-coral: invert(63%) sepia(75%) saturate(3469%) hue-rotate(321deg) brightness(95%) contrast(106%);
    --colorize-brown: invert(45%) sepia(4%) saturate(1377%) hue-rotate(349deg) brightness(94%) contrast(87%);
    --colorize-teal: invert(76%) sepia(27%) saturate(973%) hue-rotate(137deg) brightness(75%) contrast(78%);
    --colorize-pink: invert(86%) sepia(51%) saturate(4987%) hue-rotate(289deg) brightness(94%) contrast(103%);
    --colorize-maybe: none;

    /* Only used in Calendar circles */
    --colorize-calendar-blue: invert(15%) sepia(95%) saturate(2077%) hue-rotate(201deg) brightness(105%) contrast(97%);
    --colorize-calendar-red: invert(10%) sepia(66%) saturate(4645%) hue-rotate(7deg) brightness(94%) contrast(103%);
    --colorize-calendar-gold: invert(23%) sepia(96%) saturate(3329%) hue-rotate(38deg) brightness(91%) contrast(58%);
    --colorize-calendar-green: invert(43%) sepia(11%) saturate(2731%) hue-rotate(85deg) brightness(83%) contrast(93%);
    --colorize-calendar-teal: invert(23%) sepia(91%) saturate(1044%) hue-rotate(154deg) brightness(99%) contrast(90%);
    --colorize-calendar-purple: invert(7%) sepia(100%) saturate(5313%) hue-rotate(255deg) brightness(74%) contrast(115%);
    --colorize-calendar-pink: invert(10%) sepia(42%) saturate(5086%) hue-rotate(315deg) brightness(94%) contrast(62%);
    --colorize-calendar-brown: invert(25%) sepia(1%) saturate(5904%) hue-rotate(343deg) brightness(87%) contrast(82%);

  &[data-color-scheme="dark"] {
    --colorize-black: none;
    --colorize-white: invert(100%);
    --colorize-ink: invert(99%) sepia(70%) saturate(310%) hue-rotate(294deg) brightness(103%) contrast(85%);
    --colorize-ink--always-dark: invert(11%) sepia(9%) saturate(2411%) hue-rotate(171deg) brightness(89%) contrast(85%);
    --colorize-inverted-ink: invert(11%) sepia(9%) saturate(2411%) hue-rotate(171deg) brightness(89%) contrast(85%);
    --colorize-subtle: invert(84%) sepia(8%) saturate(103%) hue-rotate(161deg) brightness(86%) contrast(77%);
    --colorize-very-subtle: invert(84%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(65%) contrast(55%);
    --colorize-disabled: invert(48%) sepia(6%) saturate(573%) hue-rotate(202deg) brightness(92%) contrast(84%);
    --colorize-border: invert(28%) sepia(17%) saturate(442%) hue-rotate(169deg) brightness(110%) contrast(95%);
    --colorize-red: invert(88%) sepia(38%) saturate(7021%) hue-rotate(312deg) brightness(98%) contrast(112%);
    --colorize-green: invert(74%) sepia(97%) saturate(247%) hue-rotate(87deg) brightness(98%) contrast(92%);
    --colorize-blue: invert(50%) sepia(49%) saturate(3205%) hue-rotate(198deg) brightness(101%) contrast(103%);
    --colorize-mint: invert(94%) sepia(76%) saturate(388%) hue-rotate(86deg) brightness(101%) contrast(101%);
    --colorize-purple: invert(46%) sepia(51%) saturate(1109%) hue-rotate(210deg) brightness(104%) contrast(101%);
    --colorize-orange: invert(72%) sepia(29%) saturate(829%) hue-rotate(346deg) brightness(102%) contrast(101%);
    --colorize-yellow: invert(88%) sepia(39%) saturate(471%) hue-rotate(339deg) brightness(101%) contrast(97%);
    --colorize-gold: invert(93%) sepia(41%) saturate(2895%) hue-rotate(301deg) brightness(110%) contrast(124%);
    --colorize-coral: invert(82%) sepia(20%) saturate(2046%) hue-rotate(303deg) brightness(98%) contrast(77%);
    --colorize-brown: invert(84%) sepia(3%) saturate(1737%) hue-rotate(342deg) brightness(87%) contrast(81%);
    --colorize-teal: invert(86%) sepia(28%) saturate(367%) hue-rotate(107deg) brightness(106%) contrast(101%);
    --colorize-pink: invert(85%) sepia(71%) saturate(2851%) hue-rotate(252deg) brightness(108%) contrast(93%);
    --colorize-maybe: invert(100%) sepia(76%) saturate(689%) hue-rotate(298deg) brightness(113%) contrast(85%);
  }
}

/* Legacy
 * -------------------------------------------------------------------------- */

/* - Colorizing works under the assumption that the starting point is pure black
 * - Use these utility classes when the element is closer to a one-off, when there's a CSS class
 *   that'll get reuse, don't use these classes, instead use `filter: var(--colorize-[color])` */

.colorize-ink,
.colorize-before-ink::before,
.colorize-after-ink::after { filter: var(--colorize-ink) !important; }

.colorize-inverted-ink,
.colorize-before-inverted-ink::before,
.colorize-after-inverted-ink::after { filter: var(--colorize-inverted-ink) !important; }

.colorize-subtle,
.colorize-before-subtle::before,
.colorize-after-subtle::after { filter: var(--colorize-subtle) !important; }

.colorize-red,
.colorize-before-red::before,
.colorize-after-red::after { filter: var(--colorize-red) !important; }

.colorize-green,
.colorize-before-green::before,
.colorize-after-green::after { filter: var(--colorize-green) !important; }

.colorize-blue,
.colorize-before-blue::before,
.colorize-after-blue::after { filter: var(--colorize-blue) !important; }

.colorize-purple,
.colorize-before-purple::before,
.colorize-after-purple::after { filter: var(--colorize-purple) !important; }

.colorize-orange,
.colorize-before-orange::before,
.colorize-after-orange::after { filter: var(--colorize-orange) !important; }

.colorize-yellow,
.colorize-before-yellow::before,
.colorize-after-yellow::after { filter: var(--colorize-yellow) !important; }

.colorize-invert {
  [data-color-scheme="dark"] & { filter: invert(1) !important; }
}