:root {
  /* Fighter card colors are preserved together because card generation depends on this full set. */
  --fighter-card-bg-color: rgb(5, 5, 6);
  --fighter-card-border-color: rgb(210, 213, 219);
  --fighter-card-shadow-color: rgba(0, 0, 0, 0.48);
  --fighter-card-label-bg-color: rgba(0, 0, 0, 0.72);
  --fighter-card-photo-highlight-color: rgba(255, 255, 255, 0.11);
  --fighter-card-back-gradient-color: rgba(92, 126, 166, 0.36);
  --fighter-card-back-gradient-clear-color: rgba(0, 0, 0, 0);
  --fighter-card-back-highlight-color: rgba(210, 226, 255, 0.28);
  /* End fighter card colors. */
  /* Metal colors are preserved for the account bar. Because its cool. */
  --default-theme-account-bar-metal-top-rgb: 255, 255, 255;
  --default-theme-account-bar-metal-upper-rgb: 238, 242, 247;
  --default-theme-account-bar-metal-middle-rgb: 198, 207, 218;
  --default-theme-account-bar-metal-lower-rgb: 142, 153, 166;
  --default-theme-account-bar-metal-bottom-rgb: 232, 237, 244;
  /* End metal colors. */

  /* To be investigated */
  --site-title-gradient-top-color: rgba(255, 255, 255, 0.98);
  --site-title-gradient-upper-color: rgba(229, 235, 244, 0.94);
  --site-title-gradient-middle-color: rgba(140, 151, 165, 0.92);
  --site-title-gradient-lower-color: rgba(247, 250, 255, 0.96);
  --site-title-gradient-bottom-color: rgba(186, 196, 208, 0.96);
  --site-title-shadow-color: rgba(255, 255, 255, 0.18);
  --app-loading-bg-color: color-mix(in srgb, var(--top-shell-bg-color), var(--bg-color) 16%);
  
  --default-theme-selected2-rgb: 111, 8, 8;
  --default-theme-base-text-rgb: 244, 246, 251;
  --default-theme-muted-text-rgb: 152, 161, 179;

  --default-theme-confirm-button-rgb: 48, 45, 44;
  --default-theme-cancel-button-rgb: 24, 26, 30;
  --default-theme-other-button-rgb: 255, 255, 255;
  --default-theme-page-bg-rgb: 11, 13, 16;
  --default-theme-page-top-rgb: 14, 17, 23;
  --default-theme-overlay-panel-rgb: 23, 24, 27;
  --default-theme-panel-rgb: 255, 255, 255;
  --default-theme-border-rgb: 255, 255, 255;
  --default-theme-picker-menu-rgb: 31, 31, 31;
  --default-theme-dark-green-text-rgb: 4, 19, 13;
  --default-theme-focus-outline-rgb: 119, 167, 255;
  --default-theme-document-frame-rgb: 225, 225, 223;
  --default-theme-document-page-rgb: 255, 255, 255;
  --default-theme-document-text-rgb: 17, 17, 17;
  --default-theme-document-border-rgb: 119, 119, 119;
  --default-theme-document-scrollbar-rgb: 85, 85, 85;
  --default-theme-document-scrollbar-track-rgb: 231, 231, 227;
  --default-theme-account-bar-text-rgb: 17, 17, 17;
  /* End color definitions under investigation */

  /* Accepted Theme Color Definitions Begin here */
  /* Monochromes, light to dark */
  --default-theme-black-rgb: 0, 0, 0;
  --default-theme-near-black-rgb: 5, 5, 5;
  --default-theme-dark-charcoal-rgb: 17, 18, 20;
  --default-theme-charcoal-rgb: 27, 27, 29;
  --default-theme-light-grey-rgb: 196 196 196;
  --default-theme-white-rgb: 255 255 255;

  /* ROYGBIV */
  --default-theme-pure-red: rgb(255, 0, 0);
  --default-theme-red-rgb: 226, 72, 61;
  --default-theme-pink-rgb: 220, 78, 142;
  --default-theme-strong-yellow-rgb: 214, 167, 47;
  --default-theme-brass-rgb: 184, 137, 55;
  --default-theme-green-rgb: 61, 162, 98;
  --default-theme-blue-rgb: 54, 112, 190;
  --default-theme-slate-rgb: 42, 61, 78;
  --default-theme-navy-rgb: 18, 34, 64;
  /* Accepted Theme Color Definitions End here */


  /* Color and name variants for use in CSS */
  --default-theme-black: rgb(var(--default-theme-black-rgb));
  --default-theme-black-alpha-3: rgba(0, 0, 0, 0.36);
  --default-theme-black-alpha-4: rgba(0, 0, 0, 0.46);
  --default-theme-black-alpha-5: rgba(0, 0, 0, 0.56);
  --default-theme-black-alpha-7: rgba(0, 0, 0, 0.76);

  --default-theme-near-black: rgb(var(--default-theme-near-black-rgb));

  --default-theme-dark-charcoal: rgb(var(--default-theme-dark-charcoal-rgb));

  --default-theme-charcoal: rgb(var(--default-theme-charcoal-rgb));

  --default-theme-light-grey: rgb(var(--default-theme-light-grey-rgb));

  --default-theme-white: rgb(var(--default-theme-white-rgb));
  --default-theme-white-alpha-1: rgb(var(--default-theme-white-rgb) / 0.16);
  --default-theme-white-alpha-4: rgb(var(--default-theme-white-rgb) / 0.46);
  --default-theme-white-alpha-5: rgb(var(--default-theme-white-rgb) / 0.56);
  --default-theme-white-alpha-6: rgb(var(--default-theme-white-rgb) / 0.66);
  --default-theme-white-alpha-7: rgb(var(--default-theme-white-rgb) / 0.76);

  --default-theme-red: rgb(var(--default-theme-red-rgb));
  --default-theme-red-light: color-mix(in srgb, var(--default-theme-red), white 8%);
  --default-theme-red-dark: color-mix(in srgb, var(--default-theme-red), black 28%);
  --default-theme-red-alpha-1: rgb(var(--default-theme-red-rgb) / 0.16);
  --default-theme-red-alpha-5: rgb(var(--default-theme-red-rgb) / 0.56);

  --default-theme-pink: rgb(var(--default-theme-pink-rgb));
  --default-theme-pink-alpha-5: rgba(var(--default-theme-pink-rgb), 0.56);

  --default-theme-strong-yellow: rgb(var(--default-theme-strong-yellow-rgb));
  --default-theme-strong-yellow-alpha-1: rgba(var(--default-theme-strong-yellow-rgb), 0.16);
  --default-theme-strong-yellow-alpha-2: rgba(var(--default-theme-strong-yellow-rgb), 0.26);
  --default-theme-strong-yellow-alpha-3: rgba(var(--default-theme-strong-yellow-rgb), 0.36);
  --default-theme-strong-yellow-alpha-4: rgba(var(--default-theme-strong-yellow-rgb), 0.46);
  --default-theme-strong-yellow-alpha-5: rgba(var(--default-theme-strong-yellow-rgb), 0.56);
  --default-theme-strong-yellow-alpha-7: rgba(var(--default-theme-strong-yellow-rgb), 0.76);
  --default-theme-strong-yellow-alpha-8: rgba(var(--default-theme-strong-yellow-rgb), 0.86);

  --default-theme-brass: rgb(var(--default-theme-brass-rgb));
  --default-theme-brass-alpha-5: rgba(var(--default-theme-brass-rgb), 0.56);

  --default-theme-green: rgb(var(--default-theme-green-rgb));
  --default-theme-green-alpha-5: rgba(var(--default-theme-green-rgb), 0.56);

  --default-theme-blue: rgb(var(--default-theme-blue-rgb));
  --default-theme-blue-alpha-5: rgba(var(--default-theme-blue-rgb), 0.56);

  --default-theme-slate: rgb(var(--default-theme-slate-rgb));
  --default-theme-slate-light: color-mix(in srgb, var(--default-theme-slate), white 18%);
  --default-theme-slate-dark: color-mix(in srgb, var(--default-theme-slate), black 22%);
  --default-theme-slate-alpha-2: rgb(var(--default-theme-slate-rgb) / 0.26);

  --default-theme-navy: rgb(var(--default-theme-navy-rgb));
  --default-theme-navy-alpha-3: rgb(var(--default-theme-navy-rgb) / 0.36);
  --default-theme-navy-alpha-4: rgb(var(--default-theme-navy-rgb) / 0.46);

  --default-theme-selected2: rgb(var(--default-theme-selected2-rgb));
  --default-theme-base-text: rgb(var(--default-theme-base-text-rgb));
  --default-theme-muted-text: rgb(var(--default-theme-muted-text-rgb));
  --default-theme-link-text: rgb(var(--default-theme-link-text-rgb));
  --default-theme-confirm-button: rgb(var(--default-theme-confirm-button-rgb));
  --default-theme-cancel-button: rgb(var(--default-theme-cancel-button-rgb));
  --default-theme-other-button: rgb(var(--default-theme-other-button-rgb));
  --default-theme-picker-menu: rgb(var(--default-theme-picker-menu-rgb));
  --default-theme-dark-green-text: rgb(var(--default-theme-dark-green-text-rgb));
  --default-theme-focus-outline: rgb(var(--default-theme-focus-outline-rgb));
  --default-theme-document-frame: rgb(var(--default-theme-document-frame-rgb));
  --default-theme-document-page: rgb(var(--default-theme-document-page-rgb));
  --default-theme-document-text: rgb(var(--default-theme-document-text-rgb));
  --default-theme-document-border: rgb(var(--default-theme-document-border-rgb));
  --default-theme-document-scrollbar: rgb(var(--default-theme-document-scrollbar-rgb));
  --default-theme-document-scrollbar-track: rgb(var(--default-theme-document-scrollbar-track-rgb));
  --default-theme-link-text-rgb: var(--default-theme-strong-yellow-rgb);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --dark-theme-strong-yellow: var(--default-theme-strong-yellow);
    --dark-theme-strong-yellow-rgb: var(--default-theme-strong-yellow-rgb);
    --dark-theme-dark-red: var(--default-theme-selected2);
    --dark-theme-dark-red-rgb: var(--default-theme-selected2-rgb);
    --dark-theme-button-charcoal: var(--default-theme-confirm-button);
    --dark-theme-button-charcoal-rgb: var(--default-theme-confirm-button-rgb);
    --dark-theme-button-charcoal-top: color-mix(in srgb, var(--dark-theme-button-charcoal), white 14%);
    --dark-theme-button-charcoal-bottom: color-mix(in srgb, var(--dark-theme-button-charcoal), black 18%);
    --dark-theme-content-spotlight-red-rgb: var(--dark-theme-dark-red-rgb);
    --content-spotlight-color-rgb: var(--dark-theme-content-spotlight-red-rgb);
    --button-action-color: var(--dark-theme-button-charcoal);
    --button-action-color-rgb: var(--dark-theme-button-charcoal-rgb);
    --button-action-top-color: var(--dark-theme-button-charcoal-top);
    --button-action-bottom-color: var(--dark-theme-button-charcoal-bottom);
    --button-action-text-color: var(--main-text-color);
    --button-change-text-color: var(--main-text-color);
    --bg-color: rgb(var(--default-theme-page-bg-rgb));
    --bg-top-color: rgb(var(--default-theme-page-top-rgb));
    --overlay-panel-color: rgb(var(--default-theme-overlay-panel-rgb));
    --top-shell-bg-color: rgba(11, 13, 16, 0.86);
    --page-backdrop-color: rgba(var(--dark-theme-content-spotlight-red-rgb), 0.24);

    --button-bg-color: rgba(255, 255, 255, 0.035);
    --button-hover-bg-color: rgba(255, 255, 255, 0.06);
    --primary-button-shadow-color: rgba(var(--button-action-color-rgb), 0.2);

    --feed-item-bg-color: rgba(255, 255, 255, 0.035);
    --flyer-placeholder-bg-color: rgba(255, 255, 255, 0.05);
    --input-bg-color: rgba(255, 255, 255, 0.045);
    --input-autofill-bg-color: rgba(255, 255, 255, 0.045);
    --form-check-bg-color: rgba(247, 242, 232, 0.03);
    --form-error-color: #ffb7b7;
    --verification-danger-border-color: var(--default-theme-red-alpha-5);
    --verification-danger-bg-color: var(--default-theme-red-alpha-1);
    --date-picker-icon-filter: invert(1);

    --main-text-color: var(--default-theme-base-text);
    --muted-text-color: var(--default-theme-muted-text);

    --soft-border-color: rgba(255, 255, 255, 0.09);
    --strong-border-color: rgba(255, 255, 255, 0.16);

    --default-theme-strong-yellow-light: color-mix(in srgb, var(--default-theme-strong-yellow), white 24%);
    --default-theme-strong-yellow-dark: color-mix(in srgb, var(--default-theme-strong-yellow), black 10%);

    --focus-outline-color: var(--default-theme-focus-outline);
    --elevated-shadow-color: rgba(0, 0, 0, 0.22);
    --menu-shadow-color: rgba(0, 0, 0, 0.42);
    --account-bar-text-color: rgb(var(--default-theme-account-bar-text-rgb));
    --account-bar-active-text-color: #000000;
    --account-bar-divider-color: rgba(0, 0, 0, 0.18);
    --account-bar-text-shadow-color: rgba(255, 255, 255, 0.34);
    --account-bar-top-color: rgba(var(--default-theme-account-bar-metal-top-rgb), 0.92);
    --account-bar-upper-color: rgba(var(--default-theme-account-bar-metal-upper-rgb), 0.88);
    --account-bar-middle-color: rgba(var(--default-theme-account-bar-metal-middle-rgb), 0.84);
    --account-bar-lower-color: rgba(var(--default-theme-account-bar-metal-lower-rgb), 0.78);
    --account-bar-bottom-color: rgba(var(--default-theme-account-bar-metal-bottom-rgb), 0.86);
    --account-bar-top-shadow-color: rgba(255, 255, 255, 0.36);
    --account-bar-bottom-shadow-color: rgba(0, 0, 0, 0.18);
    --account-bar-active-bg-color: rgba(255, 255, 255, 0.24);
    --account-bar-active-outline-color: rgba(255, 255, 255, 0.22);
  }
}