@use "sass:color";
@use "../vars.scss" as *;
@use "../color-palette" as *;

@mixin light-theme {
  --text-primary: #{$mdn-theme-light-text-primary};
  --text-secondary: #{$mdn-theme-light-text-secondary};
  --text-active: #{$mdn-theme-light-text-active};
  --text-inactive: #{$mdn-theme-light-text-inactive};
  --text-link: #{$mdn-theme-light-text-link};
  --text-visited: #551a8b; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1787-1790
  --text-invert: #{$mdn-theme-light-text-invert};
  --text-muted: #{$mdn-theme-light-text-muted};

  --background-primary: #{$mdn-theme-light-background-primary};
  --background-secondary: #{$mdn-theme-light-background-secondary};
  --background-tertiary: #{$mdn-theme-light-background-tertiary};
  --background-toc-active: #{$mdn-theme-light-background-toc-active};
  --background-mark-yellow: #{color.adjust(
      $mdn-color-light-theme-yellow-30,
      $alpha: -0.6
    )};
  --background-mark-green: #{color.adjust(
      $mdn-color-light-theme-green-30,
      $alpha: -0.6
    )};
  --background-information: #{color.adjust(
      $mdn-theme-light-icon-information,
      $alpha: -0.9
    )};
  --background-warning: #{color.adjust(
      $mdn-theme-light-icon-warning,
      $alpha: -0.9
    )};
  --background-critical: #{color.adjust(
      $mdn-theme-light-icon-critical,
      $alpha: -0.9
    )};
  --background-success: #{color.adjust(
      $mdn-theme-light-icon-success,
      $alpha: -0.9
    )};
  --background-del: #{color.adjust(
      $mdn-theme-light-icon-critical,
      $alpha: -0.5
    )};
  --background-ins: #{color.adjust($mdn-theme-light-icon-success, $alpha: -0.5)};

  --border-primary: #{$mdn-theme-light-border-primary};
  --border-secondary: #{$mdn-theme-light-border-secondary};

  --button-primary-default: #{$mdn-theme-light-button-primary-default};
  --button-primary-hover: #{$mdn-theme-light-button-primary-hover};
  --button-primary-active: #{$mdn-theme-light-button-primary-active};
  --button-primary-inactive: #{$mdn-theme-light-button-primary-inactive};

  --button-secondary-default: #{$mdn-theme-light-button-secondary-default};
  --button-secondary-hover: #{$mdn-theme-light-button-secondary-hover};
  --button-secondary-active: #{$mdn-theme-light-button-secondary-active};
  --button-secondary-inactive: #{$mdn-theme-light-button-secondary-inactive};
  --button-secondary-border-focus: #{$mdn-theme-light-button-secondary-border-focus};
  --button-secondary-border-red: #{$mdn-theme-light-button-secondary-border-red};
  --button-secondary-border-red-focus: #{$mdn-theme-light-button-secondary-border-red-focus};

  --icon-primary: #{$mdn-theme-light-icon-primary};
  --icon-secondary: #{$mdn-theme-light-icon-secondary};
  --icon-information: #{$mdn-theme-light-icon-information};
  --icon-warning: #{$mdn-theme-light-icon-warning};
  --icon-critical: #{$mdn-theme-light-icon-critical};
  --icon-success: #{$mdn-theme-light-icon-success};

  --accent-primary: #{$mdn-theme-light-accent-primary};
  --accent-primary-engage: #{color.adjust(
      $mdn-theme-light-accent-primary,
      $alpha: -0.9
    )};

  --accent-secondary: #{$mdn-theme-light-accent-secondary};
  --accent-tertiary: #{color.adjust(
      $mdn-color-light-theme-blue-50,
      $alpha: -0.9
    )};

  --shadow-01: #{$mdn-theme-light-shadow-01};
  --shadow-02: #{$mdn-theme-light-shadow-02};
  --focus-01: #{$mdn-theme-light-focus-01};
  --field-focus-border: #{$mdn-theme-light-field-focus-border};

  --code-token-tag: #{$mdn-theme-light-code-token-tag};
  --code-token-punctuation: #{$mdn-theme-light-code-token-punctuation};
  --code-token-attribute-name: #{$mdn-theme-light-code-token-attribute-name};
  --code-token-attribute-value: #{$mdn-theme-light-code-token-attribute-value};
  --code-token-comment: #{$mdn-theme-light-code-token-comment};
  --code-token-default: #{$mdn-theme-light-code-token-default};
  --code-token-selector: #{$mdn-theme-light-code-token-selector};
  --code-background-inline: #{$mdn-theme-light-code-background-inline};
  --code-background-block: #{$mdn-theme-light-code-background-block};

  --ix-tab-background-active: #fff;

  --notecard-link-color: #{$mdn-color-neutral-80};

  --scrollbar-bg: transparent;
  --scrollbar-color: rgba(0, 0, 0, 0.25);

  --category-color: #{$mdn-color-light-theme-blue-50};
  --category-color-background: #{$mdn-color-light-theme-blue-50}10;
  --code-color: #{$mdn-color-light-theme-blue-40};
  --mark-color: #{$mdn-color-light-theme-blue-10};

  --plus-accent-color: #{$mdn-color-dark-theme-red-60};
  --html-accent-color: #{$mdn-color-light-theme-red-60};
  --css-accent-color: #{$mdn-color-light-theme-blue-60};
  --js-accent-color: #{$mdn-color-light-theme-yellow-40};
  --http-accent-color: #{$mdn-color-light-theme-green-60};
  --apis-accent-color: #{$mdn-color-light-theme-violet-60};
  --learn-accent-color: #{$mdn-color-light-theme-pink-60};

  --plus-code-color: #{$mdn-color-light-theme-blue-60};
  --html-code-color: #{$mdn-color-light-theme-red-70};
  --css-code-color: #{$mdn-color-light-theme-blue-60};
  --js-code-color: #{$mdn-color-light-theme-yellow-60};
  --http-code-color: #{$mdn-color-light-theme-green-60};
  --apis-code-color: #{$mdn-color-light-theme-violet-60};
  --learn-code-color: #{$mdn-color-light-theme-pink-60};

  --plus-mark-color: #{$mdn-color-light-theme-red-10};
  --html-mark-color: #{$mdn-color-light-theme-red-10};
  --css-mark-color: #{$mdn-color-light-theme-blue-10};
  --js-mark-color: #{$mdn-color-light-theme-yellow-10};
  --http-mark-color: #{$mdn-color-light-theme-green-10};
  --apis-mark-color: #{$mdn-color-light-theme-violet-10};
  --learn-mark-color: #{$mdn-color-light-theme-pink-10};

  --plus-accent-background-color: #{$mdn-color-light-theme-red-50}30;
  --html-accent-background-color: #{$mdn-color-light-theme-red-50}30;
  --css-accent-background-color: #{$mdn-color-light-theme-blue-50}30;
  --js-accent-background-color: #{$mdn-color-light-theme-yellow-50}30;
  --http-accent-background-color: #{$mdn-color-light-theme-green-50}30;
  --apis-accent-background-color: #{$mdn-color-light-theme-violet-50}30;
  --learn-accent-background-color: #{$mdn-color-light-theme-pink-50}30;

  --plus-accent-engage: #{color.adjust(
      $mdn-color-light-theme-red-50,
      $alpha: -0.3
    )};
  --html-accent-engage: #{color.adjust(
      $mdn-color-light-theme-red-50,
      $alpha: -0.3
    )};
  --css-accent-engage: #{color.adjust(
      $mdn-color-light-theme-blue-50,
      $alpha: -0.3
    )};
  --js-accent-engage: #{color.adjust(
      $mdn-color-light-theme-yellow-50,
      $alpha: -0.3
    )};
  --http-accent-engage: #{color.adjust(
      $mdn-color-light-theme-green-50,
      $alpha: -0.3
    )};
  --apis-accent-engage: #{color.adjust(
      $mdn-color-light-theme-violet-50,
      $alpha: -0.3
    )};
  --learn-accent-engage: #{color.adjust(
      $mdn-color-light-theme-pink-50,
      $alpha: -0.3
    )};

  --modal-backdrop-color: #{rgba($mdn-theme-dark-background-primary, 0.1)};
  --blend-color: #{$mdn-color-white}80;

  --text-primary-red: #{$mdn-color-light-theme-red-60};
  --text-primary-green: #{$mdn-color-light-theme-green-60};
  --text-primary-blue: #{$mdn-color-light-theme-blue-60};
  --text-primary-yellow: #{$mdn-color-light-theme-yellow-60};

  --collections-link: #{$mdn-color-light-theme-red-70};
  --collections-header: #{$mdn-color-light-theme-red-10};
  --collections-mandala: #{$mdn-color-light-theme-red-30};
  --collections-icon: #{$mdn-color-light-theme-red-50};

  --updates-link: #{$mdn-color-light-theme-blue-60};
  --updates-header: #{$mdn-color-neutral-light-70};
  --updates-mandala: #{$mdn-color-light-theme-blue-30};
  --updates-icon: #{$mdn-color-light-theme-blue-50};

  --ai-help-link: #{$mdn-color-light-theme-green-60};
  --ai-help-header: #{$mdn-color-neutral-light-70};
  --ai-help-mandala: #{$mdn-color-light-theme-green-30};
  --ai-help-icon: #{$mdn-color-light-theme-green-50};
  --ai-help-accent-background-color: #{$mdn-color-light-theme-green-50}10;

  --observatory-bg: rgba(242, 242, 245, 1);
  --observatory-bg-code: #e1e1e1;
  --observatory-bg-secondary: rgba(255, 255, 255, 1);
  --observatory-color: #000;
  --observatory-color-secondary: rgba(105, 105, 105, 1);
  --observatory-inverse-color: rgba(255, 255, 255, 1);
  --observatory-inverse-color-secondary: rgba(179, 179, 179, 1);
  --observatory-accent: #5a23d7;
  --observatory-accent-light: #5a23d7aa;
  --observatory-border: rgba(228, 228, 246, 1);
  --observatory-border-accent: rgba(90, 35, 215, 1);
  --observatory-pass-icon-bg: rgba(229, 250, 230, 1);
  --observatory-pass-icon-color: rgba(0, 121, 54, 1);
  --observatory-fail-icon-bg: rgba(250, 229, 229, 1);
  --observatory-fail-icon-color: rgba(211, 0, 56, 1);
  --observatory-table-bg: rgba(255, 255, 255, 1);
  --observatory-table-bg-alternate: #f9f9fb;
  --observatory-table-header-bg: rgba(249, 249, 251, 1);
  --observatory-grade-a-bg: #d2fadd;
  --observatory-grade-a-border: #017a37;
  --observatory-grade-b-bg: #e8fad2;
  --observatory-grade-b-border: #547a01;
  --observatory-grade-c-bg: #faf8d2;
  --observatory-grade-c-border: #7a7001;
  --observatory-grade-d-bg: #fae8d2;
  --observatory-grade-d-border: #a65001;
  --observatory-grade-f-bg: #fad2d2;
  --observatory-grade-f-border: #a00;
  --observatory-arrow-down-color: rgba(158, 0, 39, 1);
  --observatory-arrow-up-color: rgba(0, 121, 54, 1);

  --form-limit-color: #{$mdn-color-neutral-60};
  --form-limit-color-emphasis: #{$mdn-color-neutral-70};
  --form-invalid-color: #{$mdn-color-light-theme-red-60};
  --form-invalid-focus-color: #{$mdn-color-light-theme-red-50};
  --form-invalid-focus-effect-color: #{rgba($mdn-color-light-theme-red-50, 0.2)};

  --baseline-high-bg: #e6f4ea;
  --baseline-high-engine-bg: #ceead6;
  --baseline-high-img: url("../../assets/icons/baseline/high.svg");
  --baseline-high-check: #099949;
  --baseline-low-bg: #e8f0fe;
  --baseline-low-engine-bg: #d2e3fc;
  --baseline-low-check: #1a73e8;
  --baseline-low-img: url("../../assets/icons/baseline/low.svg");
  --baseline-low-pill-bg: #3367d6;
  --baseline-low-pill-color: #f1f3f4;
  --baseline-limited-bg: #f1f3f4;
  --baseline-limited-engine-bg: #e3e6e8;
  --baseline-limited-img: url("../../assets/icons/baseline/limited.svg");
  --baseline-limited-check: #1e8e3e;
  --baseline-limited-cross: #ea8600;

  --curriculum-bg-color: #fcefe2;
  --curriculum-bg-color-note: rgba(252, 239, 226, 0.5);
  --curriculum-bg-large-color: #fcefe2;
  --curriculum-bg-color-topic-standards: #{$mdn-color-light-theme-red-50}30;
  --curriculum-bg-color-topic-styling: #{$mdn-color-light-theme-blue-50}30;
  --curriculum-bg-color-topic-scripting: #{$mdn-color-light-theme-yellow-50}30;
  --curriculum-bg-color-topic-tooling: #{$mdn-color-light-theme-green-50}30;
  --curriculum-bg-color-topic-practices: #{$mdn-color-light-theme-violet-50}30;
  --curriculum-bg-color-landing: #fff;
  --curriculum-bg-color-landing-about-ul: #fff;
  --curriculum-bg-color-landing-top-icon: #fcefe2;
  --curriculum-bg-color-landing-stairway-floor: #fcefe2;
  --curriculum-category-color: #e3642a;
  --curriculum-color: #d47d55;
  --curriculum-module-label-color: #b34d1f;
  --curriculum-module-label-bg-color: #faf0e3;
  --curriculum-color-topic-standards: #{$mdn-color-light-theme-red-60};
  --curriculum-color-topic-styling: #{$mdn-color-light-theme-blue-60};
  --curriculum-color-topic-scripting: #{$mdn-color-light-theme-yellow-60};
  --curriculum-color-topic-tooling: #{$mdn-color-light-theme-green-60};
  --curriculum-color-topic-practices: #{$mdn-color-light-theme-violet-60};
  --curriculum-color-landing-laptop: #e3642a;
  --curriculum-border-color: #f2f1f1;
  --curriculum-border-color-hover: var(--text-inactive);
  --curriculum-bg-color-list-item-body: #fff;
  --curriculum-color-list-item-icon-topic-standards: #{$mdn-color-light-theme-red-60};
  --curriculum-color-list-item-icon-topic-styling: #{$mdn-color-light-theme-blue-60};
  --curriculum-color-list-item-icon-topic-scripting: #{$mdn-color-light-theme-yellow-60};
  --curriculum-color-list-item-icon-topic-tooling: #{$mdn-color-light-theme-green-60};
  --curriculum-color-list-item-icon-topic-practices: #{$mdn-color-light-theme-violet-60};
  --curriculum-bg-color-list-item-icon-topic-standards: #fff;
  --curriculum-bg-color-list-item-icon-topic-styling: #fff;
  --curriculum-bg-color-list-item-icon-topic-scripting: #fff;
  --curriculum-bg-color-list-item-icon-topic-tooling: #fff;
  --curriculum-bg-color-list-item-icon-topic-practices: #fff;
  --curriculum-bg-color-list-item-topic-standards: #{$mdn-color-light-theme-red-50}30;
  --curriculum-bg-color-list-item-topic-styling: #{$mdn-color-light-theme-blue-50}30;
  --curriculum-bg-color-list-item-topic-scripting: #{$mdn-color-light-theme-yellow-50}30;
  --curriculum-bg-color-list-item-topic-tooling: #{$mdn-color-light-theme-green-50}30;
  --curriculum-bg-color-list-item-topic-practices: #{$mdn-color-light-theme-violet-50}30;
  --curriculum-bg-color-partner: #fff;
  --curriculum-shadow:
    4px 4px 8px 0 rgba(179, 179, 179, 0.18),
    -4px 4px 8px 0 rgba(179, 179, 179, 0.15);
  --curriculum-shadow-landing-about-ul:
    0 4px 10px 0 rgba(227, 100, 42, 0.06), 0 -2px 4px 0 rgba(178, 92, 53, 0.06);

  --curriculum-landing-about-beginner: url("../../assets/icons/curriculum-landing-about-beginner.svg#light");
  --curriculum-landing-about-pace: url("../../assets/icons/curriculum-landing-about-pace.svg#light");
  --curriculum-landing-about-free: url("../../assets/icons/curriculum-landing-about-free.svg#light");
  --curriculum-landing-about-bullet: url("../../assets/icons/curriculum-landing-about-bullet.svg#light");
  --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#small-light");
  --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#small-light");
  --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#small-light");
  --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#small-light");
  --curriculum-module-mdn-resource: url("../../assets/icons/curriculum-mdn-resource.svg#light");
  --curriculum-bullet: url("../../assets/icons/curriculum-bullet.svg#light");
  --curriculum-about-covered: url("../../assets/icons/curriculum-about-covered.svg#light");
  --curriculum-about-detail: url("../../assets/icons/curriculum-about-detail.svg#light");
  --curriculum-about-educators: url("../../assets/icons/curriculum-about-educators.svg#light");
  --curriculum-about-not: url("../../assets/icons/curriculum-about-not.svg#light");
  --curriculum-about-students: url("../../assets/icons/curriculum-about-students.svg#light");
  --curriculum-bg-image-partner: url("../../assets/curriculum-partner-bg.svg#light");
  --curriculum-scrim-bg: url("../../assets/curriculum-scrim-bg.svg#light");
  --curriculum-landing-arrow: url("../../assets/curriculum-landing-arrow.svg#light");

  color-scheme: light;

  @media (min-width: $screen-md) {
    --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#light");
    --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#light");
    --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#light");
    --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#light");
  }
}

@mixin dark-theme {
  --text-primary: #{$mdn-theme-dark-text-primary};
  --text-secondary: #{$mdn-theme-dark-text-secondary};
  --text-active: #{$mdn-theme-dark-text-active};
  --text-inactive: #{$mdn-theme-dark-text-inactive};
  --text-link: #{$mdn-theme-dark-text-link};
  --text-visited: #ffadff; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1794-1797
  --text-invert: #{$mdn-theme-dark-text-invert};
  --text-muted: #{$mdn-theme-dark-text-muted};

  --background-primary: #{$mdn-theme-dark-background-primary};
  --background-secondary: #{$mdn-theme-dark-background-secondary};
  --background-tertiary: #{$mdn-theme-dark-background-tertiary};
  --background-toc-active: #{$mdn-theme-dark-background-toc-active};
  --background-mark-yellow: #{color.adjust(
      $mdn-color-dark-theme-yellow-30,
      $alpha: -0.6
    )};
  --background-mark-green: #{color.adjust(
      $mdn-color-light-theme-green-30,
      $alpha: -0.6
    )};
  --background-information: #{color.adjust(
      $mdn-theme-light-icon-information,
      $alpha: -0.9
    )};
  --background-warning: #{color.adjust(
      $mdn-theme-light-icon-warning,
      $alpha: -0.9
    )};
  --background-critical: #{color.adjust(
      $mdn-theme-light-icon-critical,
      $alpha: -0.9
    )};
  --background-success: #{color.adjust(
      $mdn-theme-light-icon-success,
      $alpha: -0.9
    )};
  --background-del: #{color.adjust(
      $mdn-theme-light-icon-critical,
      $alpha: -0.5
    )};
  --background-ins: #{color.adjust($mdn-theme-light-icon-success, $alpha: -0.5)};

  --border-primary: #{$mdn-theme-dark-border-primary};
  --border-secondary: #{$mdn-theme-dark-border-secondary};

  --button-primary-default: #{$mdn-theme-dark-button-primary-default};
  --button-primary-hover: #{$mdn-theme-dark-button-primary-hover};
  --button-primary-active: #{$mdn-theme-dark-button-primary-active};
  --button-primary-inactive: #{$mdn-theme-dark-button-primary-inactive};

  --button-secondary-default: #{$mdn-theme-dark-button-secondary-default};
  --button-secondary-hover: #{$mdn-theme-dark-button-secondary-hover};
  --button-secondary-active: #{$mdn-theme-dark-button-secondary-active};
  --button-secondary-inactive: #{$mdn-theme-dark-button-secondary-inactive};
  --button-secondary-border-focus: #{$mdn-theme-light-button-secondary-border-focus};
  --button-secondary-border-red: #{$mdn-theme-light-button-secondary-border-red};
  --button-secondary-border-red-focus: #{$mdn-theme-light-button-secondary-border-red-focus};

  --icon-primary: #{$mdn-theme-dark-icon-primary};
  --icon-secondary: #{$mdn-theme-dark-icon-secondary};
  --icon-information: #{$mdn-theme-dark-icon-information};
  --icon-warning: #{$mdn-theme-dark-icon-warning};
  --icon-critical: #{$mdn-theme-dark-icon-critical};
  --icon-success: #{$mdn-theme-dark-icon-success};

  --accent-primary: #{$mdn-theme-dark-accent-primary};
  --accent-primary-engage: #{color.adjust(
      $mdn-theme-dark-accent-primary,
      $alpha: -0.9
    )};
  --accent-secondary: #{$mdn-theme-dark-accent-secondary};
  --accent-tertiary: #{color.adjust(
      $mdn-color-light-theme-blue-50,
      $alpha: -0.9
    )};

  --shadow-01: #{$mdn-theme-dark-shadow-01};
  --shadow-02: #{$mdn-theme-dark-shadow-02};
  --focus-01: #{$mdn-theme-dark-focus-01};
  --field-focus-border: #{$mdn-theme-dark-field-focus-border};

  --code-token-tag: #{$mdn-theme-dark-code-token-tag};
  --code-token-punctuation: #{$mdn-theme-dark-code-token-punctuation};
  --code-token-attribute-name: #{$mdn-theme-dark-code-token-attribute-name};
  --code-token-attribute-value: #{$mdn-theme-dark-code-token-attribute-value};
  --code-token-comment: #{$mdn-theme-dark-code-token-comment};
  --code-token-default: #{$mdn-theme-dark-code-token-default};
  --code-token-selector: #{$mdn-theme-dark-code-token-selector};
  --code-background-inline: #{$mdn-theme-dark-code-background-inline};
  --code-background-block: #{$mdn-theme-dark-code-background-block};

  --ix-tab-background-active: #4e4e4e;

  --notecard-link-color: #{$mdn-color-neutral-10};

  --scrollbar-bg: transparent;
  --scrollbar-color: rgba(255, 255, 255, 0.25);

  --category-color: #{$mdn-color-dark-theme-blue-30};
  --category-color-background: #{$mdn-color-dark-theme-blue-30}70;
  --code-color: #{$mdn-color-dark-theme-blue-20};
  --mark-color: #{$mdn-color-dark-theme-blue-70};

  --plus-accent-color: #{$mdn-color-dark-theme-red-30};
  --html-accent-color: #{$mdn-color-dark-theme-red-40};
  --css-accent-color: #{$mdn-color-dark-theme-blue-30};
  --js-accent-color: #{$mdn-color-dark-theme-yellow-40};
  --http-accent-color: #{$mdn-color-dark-theme-green-40};
  --apis-accent-color: #{$mdn-color-dark-theme-violet-40};
  --learn-accent-color: #{$mdn-color-dark-theme-pink-40};

  --plus-code-color: #{$mdn-color-dark-theme-blue-20};
  --html-code-color: #{$mdn-color-neutral-light-70};
  --css-code-color: #{$mdn-color-dark-theme-blue-20};
  --js-code-color: #{$mdn-color-dark-theme-yellow-30};
  --http-code-color: #{$mdn-color-dark-theme-green-30};
  --apis-code-color: #{$mdn-color-dark-theme-violet-30};
  --learn-code-color: #{$mdn-color-dark-theme-pink-30};

  --plus-mark-color: #{$mdn-color-dark-theme-red-70};
  --html-mark-color: #{$mdn-color-dark-theme-red-70};
  --css-mark-color: #{$mdn-color-dark-theme-blue-70};
  --js-mark-color: #{$mdn-color-dark-theme-yellow-70};
  --http-mark-color: #{$mdn-color-dark-theme-green-70};
  --apis-mark-color: #{$mdn-color-dark-theme-violet-70};
  --learn-mark-color: #{$mdn-color-dark-theme-pink-70};

  --plus-accent-background-color: #{$mdn-color-light-theme-red-50}30;
  --html-accent-background-color: #{$mdn-color-light-theme-red-50}30;
  --css-accent-background-color: #{$mdn-color-light-theme-blue-50}30;
  --js-accent-background-color: #{$mdn-color-light-theme-yellow-50}30;
  --http-accent-background-color: #{$mdn-color-light-theme-green-50}30;
  --apis-accent-background-color: #{$mdn-color-light-theme-violet-50}30;
  --learn-accent-background-color: #{$mdn-color-light-theme-pink-50}30;

  --plus-accent-engage: #{color.adjust(
      $mdn-color-dark-theme-red-40,
      $alpha: -0.3
    )};
  --html-accent-engage: #{color.adjust(
      $mdn-color-dark-theme-red-40,
      $alpha: -0.3
    )};
  --css-accent-engage: #{color.adjust(
      $mdn-color-dark-theme-blue-30,
      $alpha: -0.3
    )};
  --js-accent-engage: #{color.adjust(
      $mdn-color-dark-theme-yellow-40,
      $alpha: -0.3
    )};
  --http-accent-engage: #{color.adjust(
      $mdn-color-dark-theme-green-40,
      $alpha: -0.3
    )};
  --apis-accent-engage: #{color.adjust(
      $mdn-color-dark-theme-violet-40,
      $alpha: -0.3
    )};
  --learn-accent-engage: #{color.adjust(
      $mdn-color-dark-theme-pink-40,
      $alpha: -0.3
    )};

  --modal-backdrop-color: #{rgba($mdn-theme-dark-background-primary, 0.7)};
  --blend-color: #{$mdn-color-black}80;

  --text-primary-red: #{$mdn-color-dark-theme-red-30};
  --text-primary-green: #{$mdn-color-dark-theme-green-30};
  --text-primary-blue: #{$mdn-color-dark-theme-blue-30};
  --text-primary-yellow: #{$mdn-color-dark-theme-yellow-30};

  --collections-link: #{$mdn-color-dark-theme-red-30};
  --collections-header: #{$mdn-color-dark-theme-red-90};
  --collections-mandala: #{$mdn-color-dark-theme-red-70};
  --collections-icon: #{$mdn-color-dark-theme-red-60};

  --updates-link: #{$mdn-color-dark-theme-blue-30};
  --updates-header: #{$mdn-color-black};
  --updates-mandala: #{$mdn-color-dark-theme-blue-20};
  --updates-icon: #{$mdn-color-dark-theme-blue-30};

  --ai-help-link: #{$mdn-color-dark-theme-green-30};
  --ai-help-header: #{$mdn-color-black};
  --ai-help-mandala: #{$mdn-color-dark-theme-green-20};
  --ai-help-icon: #{$mdn-color-dark-theme-green-30};
  --ai-help-accent-background-color: #{$mdn-color-light-theme-green-50}30;

  --observatory-bg: rgba(52, 52, 52, 1);
  --observatory-bg-code: #4d4d4d;
  --observatory-bg-secondary: rgba(0, 0, 0, 1);
  --observatory-color: #fff;
  --observatory-color-secondary: rgba(249, 249, 251, 1);
  --observatory-inverse-color: rgb(27, 27, 27);
  --observatory-inverse-color-secondary: rgba(105, 105, 105, 1);
  --observatory-accent: #a388ff;
  --observatory-accent-light: #a388ffaa;
  --observatory-border: rgba(105, 105, 105, 1);
  --observatory-border-accent: rgba(163, 136, 255, 1);
  --observatory-pass-icon-bg: rgba(38, 92, 61, 1);
  --observatory-pass-icon-color: rgba(138, 255, 163, 1);
  --observatory-fail-icon-bg: rgba(92, 38, 38, 1);
  --observatory-fail-icon-color: rgba(255, 121, 155, 1);
  --observatory-table-bg: rgb(27, 27, 27);
  --observatory-table-bg-alternate: #212121;
  --observatory-table-header-bg: rgb(27, 27, 27);
  --observatory-grade-a-bg: #265c3d;
  --observatory-grade-a-border: #89fca1;
  --observatory-grade-b-bg: #52662a;
  --observatory-grade-b-border: #d5fc88;
  --observatory-grade-c-bg: #66602a;
  --observatory-grade-c-border: #fcf988;
  --observatory-grade-d-bg: #5c3d26;
  --observatory-grade-d-border: #ff6a00;
  --observatory-grade-f-bg: #5c2626;
  --observatory-grade-f-border: #fc8888;
  --observatory-arrow-down-color: rgba(255, 112, 127, 1);
  --observatory-arrow-up-color: rgba(0, 255, 106, 1);

  --form-limit-color: #{$mdn-color-neutral-40};
  --form-limit-color-emphasis: #{$mdn-color-neutral-30};
  --form-invalid-color: #{$mdn-color-light-theme-red-30};
  --form-invalid-focus-color: #{$mdn-color-light-theme-red-40};
  --form-invalid-focus-effect-color: #{rgba($mdn-color-light-theme-red-40, 0.2)};

  --baseline-high-bg: #0e2a10;
  --baseline-high-engine-bg: #031b05;
  --baseline-high-img: url("../../assets/icons/baseline/high-dark.svg");
  --baseline-high-check: #099949;
  --baseline-low-bg: #041e49;
  --baseline-low-engine-bg: #020d20;
  --baseline-low-check: #1a73e8;
  --baseline-low-img: url("../../assets/icons/baseline/low-dark.svg");
  --baseline-low-pill-bg: #3367d6;
  --baseline-low-pill-color: #f1f3f4;
  --baseline-limited-bg: #282a2c;
  --baseline-limited-engine-bg: #1d1e1f;
  --baseline-limited-img: url("../../assets/icons/baseline/limited-dark.svg");
  --baseline-limited-check: #1e8e3e;
  --baseline-limited-cross: #ea8600;

  --curriculum-color: #e3642a;
  --curriculum-color-topic-standards: #f2919c;
  --curriculum-color-topic-styling: #91a6f2;
  --curriculum-color-topic-scripting: #f2cf8f;
  --curriculum-color-topic-tooling: #8ff2a4;
  --curriculum-color-topic-practices: #c891f2;
  --curriculum-bg-color: #321d13;
  --curriculum-bg-color-note: #332c29;
  --curriculum-bg-large-color: #343434;
  --curriculum-bg-color-topic-standards: #994b53;
  --curriculum-bg-color-topic-styling: #4e609e;
  --curriculum-bg-color-topic-scripting: #7d683d;
  --curriculum-bg-color-topic-tooling: #3d7c4b;
  --curriculum-bg-color-topic-practices: #584280;
  --curriculum-bg-color-landing: #0e0b0a;
  --curriculum-bg-color-landing-about-ul: #000;
  --curriculum-bg-color-landing-top-icon: #321d13;
  --curriculum-bg-color-landing-stairway-floor: rgba(137, 91, 51, 1);
  --curriculum-category-color: #e3642a;
  --curriculum-bg-color-grey: #1f1c1a;
  --curriculum-bg-color-orange: #b25c35;
  --curriculum-color-landing-laptop: #b25c35;
  --curriculum-bg-color-list-item-body: #000;
  --curriculum-border-color: #4e4e4e;
  --curriculum-border-color-hover: var(--text-inactive);
  --curriculum-module-label-color: #e3642a;
  --curriculum-module-label-bg-color: #321d13;
  --curriculum-bg-color-list-item-topic-standards: #343434;
  --curriculum-bg-color-list-item-topic-styling: #343434;
  --curriculum-bg-color-list-item-topic-scripting: #343434;
  --curriculum-bg-color-list-item-topic-tooling: #343434;
  --curriculum-bg-color-list-item-topic-practices: #343434;
  --curriculum-color-list-item-icon-topic-standards: #f2919c;
  --curriculum-color-list-item-icon-topic-styling: #91a6f2;
  --curriculum-color-list-item-icon-topic-scripting: #f2cf8f;
  --curriculum-color-list-item-icon-topic-tooling: #8ff2a4;
  --curriculum-color-list-item-icon-topic-practices: #c891f2;
  --curriculum-bg-color-list-item-icon-topic-standards: #804248;
  --curriculum-bg-color-list-item-icon-topic-styling: #425080;
  --curriculum-bg-color-list-item-icon-topic-scripting: #806a42;
  --curriculum-bg-color-list-item-icon-topic-tooling: #428050;
  --curriculum-bg-color-list-item-icon-topic-practices: #584280;
  --curriculum-bg-color-partner: #1f1c1a;
  --curriculum-shadow:
    2px 2px 5px 0 rgba(36, 36, 36, 0.15), -2px 2px 8px 0 rgba(87, 87, 87, 0.15);
  --curriculum-shadow-landing-about-ul:
    0 4px 10px 0 rgba(227, 100, 42, 0.06), 0 -2px 4px 0 rgba(178, 92, 53, 0.06);

  --curriculum-landing-about-beginner: url("../../assets/icons/curriculum-landing-about-beginner.svg#dark");
  --curriculum-landing-about-pace: url("../../assets/icons/curriculum-landing-about-pace.svg#dark");
  --curriculum-landing-about-free: url("../../assets/icons/curriculum-landing-about-free.svg#dark");
  --curriculum-landing-about-bullet: url("../../assets/icons/curriculum-landing-about-bullet.svg#dark");
  --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#small-dark");
  --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#small-dark");
  --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#small-dark");
  --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#small-dark");
  --curriculum-module-mdn-resource: url("../../assets/icons/curriculum-mdn-resource.svg#dark");
  --curriculum-bullet: url("../../assets/icons/curriculum-bullet.svg#dark");
  --curriculum-about-covered: url("../../assets/icons/curriculum-about-covered.svg#dark");
  --curriculum-about-detail: url("../../assets/icons/curriculum-about-detail.svg#dark");
  --curriculum-about-educators: url("../../assets/icons/curriculum-about-educators.svg#dark");
  --curriculum-about-not: url("../../assets/icons/curriculum-about-not.svg#dark");
  --curriculum-about-students: url("../../assets/icons/curriculum-about-students.svg#dark");
  --curriculum-bg-image-partner: url("../../assets/curriculum-partner-bg.svg#dark");
  --curriculum-scrim-bg: url("../../assets/curriculum-scrim-bg.svg#dark");
  --curriculum-landing-arrow: url("../../assets/curriculum-landing-arrow.svg#dark");

  color-scheme: dark;

  @media (min-width: $screen-md) {
    --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#dark");
    --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#dark");
    --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#dark");
    --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#dark");
  }
}

body,
:root {
  --mdn-color-white: #{$mdn-color-white};
  --mdn-color-black: #{$mdn-color-black};
  --mdn-color-ads: #{$mdn-color-ads};
  --mdn-color-background-highlight: #{$mdn-color-light-theme-yellow-10};
  --mdn-color-dark-grey: #{$mdn-color-neutral-70};
  --mdn-background-dark: #{$mdn-theme-dark-background-primary};
  --mdn-background-light: #{$mdn-theme-light-background-primary};
  --mdn-background-light-grey: #{$mdn-color-neutral-10};
  --color-announcement-banner-accent: #{$mdn-color-light-theme-pink-40};
}

.light {
  @include light-theme;
}

.dark {
  @include dark-theme;
}

// OS Default.
:root:not(.light):not(.dark) {
  @media (prefers-color-scheme: light) {
    @include light-theme;
  }

  @media (prefers-color-scheme: dark) {
    @include dark-theme;
  }
}