:root {
  --theme-off-white: #1c1c1c;
  --theme-logo-white:#f7f4f2;
  --theme-dark-background: #0a0a0a;
  --theme-light-pink: #f498ba;
  --theme-light-pink-background: #f498ba;
  --theme-light-pink-text: hsl(338, 58%, 82%);
  --theme-black-background: black;
  --theme-white-text: #f7f4f2;
  --theme-bright-pink-text: #d66790;
  --theme-bright-pink-text-og: #e24498;
  --theme-off-white-text: #f7f4f2;
  --theme-main-text-color: #f7f4f2;
  --theme-main-border-color: #f7f4f2;
  --theme-text-uninteractive-strength: 30%;
  --theme-text-pre-hover-strength: 50%;
  --theme-text-uninteractive: color-mix(
    in srgb,
    var(--theme-main-text-color) var(--theme-text-uninteractive-strength),
    transparent
  );
  --theme-text-pre-hover: color-mix(
    in srgb,
    var(--theme-main-text-color) var(--theme-text-pre-hover-strength),
    transparent
  );
  --theme-reverse-accent: #f7f4f2;
  --theme-reverse-accent-text: black;
  --theme-accent-contrast-text: black;
  --theme-alert-color: #e10d27;
  --theme-loudness-color: #ef3ea8;
  --theme-character-color: #46b9e7;
  --theme-modal-overlay-background: rgba(0, 0, 0, 0.82);
  --theme-modal-slide-up-overlay-background: rgba(0, 0, 0, 0.56);
  --theme-modal-border-color: #f7f4f299;
  --theme-modal-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
  --theme-modal-mobile-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  --theme-quick-processor-background: var(--theme-black-background);
  --theme-quick-processor-track-version-title-background: rgb(29, 29, 28);
  --theme-quick-processor-secondary-control-background: rgb(29, 29, 28);
  --theme-quick-processor-mobile-expanded-track-version-background: rgba(247, 244, 242, 0.1);
  --theme-search-background: #f7f4f21c;
  --theme-search-inner-border-color: rgba(0, 0, 0, 0.2);
  --theme-search-focus-border-color: var(--theme-main-border-color);
  --theme-quick-processor-button-progress-fill: rgb(255 255 255 / 0.16);
  --theme-quick-processor-button-progress-rest: rgb(255 255 255 / 0.06);
  --theme-interactive-hover-opacity: 0.7;
  --theme-selected-button-gray: #f7f4f247;
  --theme-dark-gray: #808080;
  --theme-light-gray: #EDEAEA;
  --theme-hyfi-pink: #d66790;
  --theme-yellow: #f6e84a;
  --theme-dividing-line-color: rgba(247, 244, 242, 0.24);;
  --theme-darker-tan:  #131313;
  --theme-light-tan:  #1b1b1b;
  --theme-lightest-tan: #0A0A0A;
  --theme-auth-stable-text: #f7f4f2;
  --theme-auth-stable-muted-text: rgba(247, 244, 242, 0.8);
  --theme-auth-stable-link: #d66790;
  --theme-auth-stable-error: #ff8fb7;
  --theme-auth-stable-input-text: #f7f4f2;
  --theme-auth-stable-input-placeholder: rgba(247, 244, 242, 0.72);
  --theme-auth-stable-input-bg: rgba(247, 244, 242, 0.08);
  --theme-auth-stable-disabled-bg: #7d5363;
  --theme-auth-stable-button-text: #f7f4f2;
  --theme-auth-stable-arrow-overlay: rgba(10, 10, 10, 0.58);
}


/* Palette inspired by nationalparktypeface.com/Downloads-Donations. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="park"] {
  --theme-dark-background: #003300;
  --theme-black-background: #003300;
  --theme-off-white: #0D400D;
  --theme-darker-tan: #002900;
  --theme-light-tan: #003300;
  --theme-lightest-tan: #0D400D;
  --theme-logo-white: #FFFFFF;
  --theme-white-text: #FFFFFF;
  --theme-off-white-text: #FFFFFF;
  --theme-main-text-color: #FFFFFF;
  --theme-main-border-color: #FFFFFF;
  --theme-reverse-accent: #FFFFFF;
  --theme-reverse-accent-text: #003300;
  --theme-accent-contrast-text: #003300;
  --theme-quick-processor-track-version-title-background: #0D400D;
  --theme-quick-processor-secondary-control-background: #0D400D;
}

/* Stelle uses the cover's warm black, white lettering, and blue/orange palette. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="stelle"] {
  --theme-dark-background: #1D130A;
  --theme-black-background: #1D130A;
  --theme-off-white: #2B2016;
  --theme-darker-tan: #160E07;
  --theme-light-tan: #1D130A;
  --theme-lightest-tan: #2B2016;
  --theme-logo-white: #FFFFFF;
  --theme-white-text: #FFFFFF;
  --theme-off-white-text: #FFFFFF;
  --theme-main-text-color: #FFFFFF;
  --theme-main-border-color: #FFFFFF;
  --theme-reverse-accent: #FFFFFF;
  --theme-reverse-accent-text: #1D130A;
  --theme-accent-contrast-text: #1D130A;
  --theme-quick-processor-track-version-title-background: #2B2016;
  --theme-quick-processor-secondary-control-background: #2B2016;
}

/* Zap draws its charcoal, paper-white, blue, and pink from the book fair image. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="zap"] {
  --theme-dark-background: #181B1C;
  --theme-black-background: #181B1C;
  --theme-off-white: #25292A;
  --theme-darker-tan: #111415;
  --theme-light-tan: #181B1C;
  --theme-lightest-tan: #25292A;
  --theme-logo-white: #EEEDE6;
  --theme-white-text: #EEEDE6;
  --theme-off-white-text: #EEEDE6;
  --theme-main-text-color: #EEEDE6;
  --theme-main-border-color: #EEEDE6;
  --theme-reverse-accent: #EEEDE6;
  --theme-reverse-accent-text: #181B1C;
  --theme-accent-contrast-text: #181B1C;
  --theme-quick-processor-track-version-title-background: #25292A;
  --theme-quick-processor-secondary-control-background: #25292A;
}

/* Planar pairs black and white with pink/orange accents. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="planar"] {
  --theme-dark-background: #000000;
  --theme-black-background: #000000;
  --theme-logo-white: #FFFFFF;
  --theme-white-text: #FFFFFF;
  --theme-off-white-text: #FFFFFF;
  --theme-main-text-color: #FFFFFF;
  --theme-main-border-color: #FFFFFF;
  --theme-reverse-accent: #FFFFFF;
  --theme-reverse-accent-text: #000000;
  --theme-accent-contrast-text: #000000;
}

/* Rothko swaps the painting's coral and blue into a blue field and coral player. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="rothko"] {
  --theme-dark-background: #183574;
  --theme-black-background: #183574;
  --theme-off-white: #294785;
  --theme-darker-tan: #12295F;
  --theme-light-tan: #183574;
  --theme-lightest-tan: #294785;
  --theme-logo-white: #F5EBDD;
  --theme-white-text: #F5EBDD;
  --theme-off-white-text: #F5EBDD;
  --theme-main-text-color: #F5EBDD;
  --theme-main-border-color: #F5EBDD;
  --theme-reverse-accent: #F5EBDD;
  --theme-reverse-accent-text: #183574;
  --theme-accent-contrast-text: #F5EBDD;
  --theme-quick-processor-track-version-title-background: #12295F;
  --theme-quick-processor-secondary-control-background: #12295F;
}

/* RoseOil echoes the painting's blue edges and luminous pink/coral fields. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="roseoil"] {
  --theme-dark-background: #243477;
  --theme-black-background: #243477;
  --theme-off-white: #324387;
  --theme-darker-tan: #1C2A65;
  --theme-light-tan: #243477;
  --theme-lightest-tan: #324387;
  --theme-logo-white: #FFF0EF;
  --theme-white-text: #FFF0EF;
  --theme-off-white-text: #FFF0EF;
  --theme-main-text-color: #FFF0EF;
  --theme-main-border-color: #FFF0EF;
  --theme-reverse-accent: #FFF0EF;
  --theme-reverse-accent-text: #243477;
  --theme-accent-contrast-text: #243477;
  --theme-quick-processor-track-version-title-background: #1C2A65;
  --theme-quick-processor-secondary-control-background: #1C2A65;
}

/* Resin draws on the painting's olive shadows, amber band, and burnt orange. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="resin"] {
  --theme-dark-background: #454619;
  --theme-black-background: #454619;
  --theme-off-white: #555625;
  --theme-darker-tan: #373813;
  --theme-light-tan: #454619;
  --theme-lightest-tan: #555625;
  --theme-logo-white: #FFF3D6;
  --theme-white-text: #FFF3D6;
  --theme-off-white-text: #FFF3D6;
  --theme-main-text-color: #FFF3D6;
  --theme-main-border-color: #FFF3D6;
  --theme-reverse-accent: #FFF3D6;
  --theme-reverse-accent-text: #454619;
  --theme-accent-contrast-text: #454619;
  --theme-quick-processor-track-version-title-background: #373813;
  --theme-quick-processor-secondary-control-background: #373813;
}

/* Umbra echoes the painting's violet shadows, lavender, and blue fields. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="umbra"] {
  --theme-dark-background: #302B48;
  --theme-black-background: #302B48;
  --theme-off-white: #403A59;
  --theme-darker-tan: #252137;
  --theme-light-tan: #302B48;
  --theme-lightest-tan: #403A59;
  --theme-logo-white: #F3EDF8;
  --theme-white-text: #F3EDF8;
  --theme-off-white-text: #F3EDF8;
  --theme-main-text-color: #F3EDF8;
  --theme-main-border-color: #F3EDF8;
  --theme-reverse-accent: #F3EDF8;
  --theme-reverse-accent-text: #302B48;
  --theme-accent-contrast-text: #302B48;
  --theme-quick-processor-track-version-title-background: #252137;
  --theme-quick-processor-secondary-control-background: #252137;
}

/* Icarus pairs ultramarine with the artwork's yellow stars and crimson heart. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="icarus"] {
  --theme-dark-background: #3028C4;
  --theme-black-background: #3028C4;
  --theme-off-white: #4139D0;
  --theme-darker-tan: #2520A8;
  --theme-light-tan: #3028C4;
  --theme-lightest-tan: #4139D0;
  --theme-logo-white: #FFFDF2;
  --theme-white-text: #FFFDF2;
  --theme-off-white-text: #FFFDF2;
  --theme-main-text-color: #FFFDF2;
  --theme-main-border-color: #FFFDF2;
  --theme-reverse-accent: #FFFDF2;
  --theme-reverse-accent-text: #3028C4;
  --theme-accent-contrast-text: #3028C4;
  --theme-quick-processor-track-version-title-background: #2520A8;
  --theme-quick-processor-secondary-control-background: #2520A8;
}

/* Genoa echoes the painting's periwinkle field and coral/rose geometry. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="genoa"] {
  --theme-dark-background: #626991;
  --theme-black-background: #626991;
  --theme-off-white: #747BA2;
  --theme-darker-tan: #535A80;
  --theme-light-tan: #626991;
  --theme-lightest-tan: #747BA2;
  --theme-logo-white: #F8F2E5;
  --theme-white-text: #F8F2E5;
  --theme-off-white-text: #F8F2E5;
  --theme-main-text-color: #F8F2E5;
  --theme-main-border-color: #F8F2E5;
  --theme-reverse-accent: #F8F2E5;
  --theme-reverse-accent-text: #626991;
  --theme-accent-contrast-text: #626991;
  --theme-quick-processor-track-version-title-background: #535A80;
  --theme-quick-processor-secondary-control-background: #535A80;
}

/* Castle pairs deep teal shadows with golden sky and coral towers. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="castle"] {
  --theme-dark-background: #153E49;
  --theme-black-background: #153E49;
  --theme-off-white: #24505B;
  --theme-darker-tan: #0E303A;
  --theme-light-tan: #153E49;
  --theme-lightest-tan: #24505B;
  --theme-logo-white: #F7E8CE;
  --theme-white-text: #F7E8CE;
  --theme-off-white-text: #F7E8CE;
  --theme-main-text-color: #F7E8CE;
  --theme-main-border-color: #F7E8CE;
  --theme-reverse-accent: #F7E8CE;
  --theme-reverse-accent-text: #153E49;
  --theme-accent-contrast-text: #153E49;
  --theme-quick-processor-track-version-title-background: #0E303A;
  --theme-quick-processor-secondary-control-background: #0E303A;
}


/* Surreal pairs petrol-blue sky, moon-white lettering, and a solid vermilion sun. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="surreal"] {
  --theme-dark-background: #165A70;
  --theme-black-background: #165A70;
  --theme-off-white: #276B80;
  --theme-darker-tan: #104A5D;
  --theme-light-tan: #165A70;
  --theme-lightest-tan: #276B80;
  --theme-logo-white: #F4F3EC;
  --theme-white-text: #F4F3EC;
  --theme-off-white-text: #F4F3EC;
  --theme-main-text-color: #F4F3EC;
  --theme-main-border-color: #F4F3EC;
  --theme-reverse-accent: #F4F3EC;
  --theme-reverse-accent-text: #165A70;
  --theme-accent-contrast-text: #F4F3EC;
  --theme-quick-processor-track-version-title-background: #104A5D;
  --theme-quick-processor-secondary-control-background: #104A5D;
}

/* Plink pairs the painting's cobalt field with soft white and warm yellow. */
:root[data-hyfi-theme-enabled="true"][data-hyfi-palette="plink"] {
  --theme-dark-background: #204C91;
  --theme-black-background: #204C91;
  --theme-off-white: #315EA3;
  --theme-darker-tan: #183D79;
  --theme-light-tan: #204C91;
  --theme-lightest-tan: #315EA3;
  --theme-logo-white: #F3F2EC;
  --theme-white-text: #F3F2EC;
  --theme-off-white-text: #F3F2EC;
  --theme-main-text-color: #F3F2EC;
  --theme-main-border-color: #F3F2EC;
  --theme-reverse-accent: #F3F2EC;
  --theme-reverse-accent-text: #204C91;
  --theme-accent-contrast-text: #204C91;
  --theme-quick-processor-track-version-title-background: #183D79;
  --theme-quick-processor-secondary-control-background: #183D79;
}

#musik-hack-logo-pink {
  fill: var(--theme-hyfi-pink) !important;
}