/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://global/skin/design-system/toolbar.css");

@layer tokens-foundation {
  /* These tokens are declared inside of tokens-foundation layer so that the
   * tokens-browser-theme layer can override them with design-system colors
   * on platforms where the native theme is not active (e.g. macOS). */
  :root {
    &:where([customtitlebar]) {
      --toolbox-background-color: ActiveCaption;
      --toolbox-text-color: CaptionText;
      --toolbox-background-color-inactive: InactiveCaption;
      --toolbox-text-color-inactive: InactiveCaptionText;
    }
  }
}

:root {
  --short-notification-background: #0250bb;
  --short-notification-gradient: #9059ff;
  --warning-icon-bgcolor: light-dark(#ffa436, #ffbd4f);

  --content-area-shadow: var(--card-box-shadow);
  --chrome-content-separator-color: var(--card-border-color);

  @media not -moz-pref("sidebar.revamp"), -moz-pref("browser.nova.enabled") {
    &:not([lwtheme]) {
      --chrome-content-separator-color: ThreeDShadow;
    }
  }

  /**
   * These colors are for when an AMO LWT is installed, we force blue/cyan for
   * the link/focus colors. We probably don't want to change this to purple for
   * Nova but there could be a case for using --color-accent-primary instead.
   * Any change will affect contrasts for LWTs but using --color-accent-primary
   * would allow the user to change the color at least.
   */
  &[lwtheme]:not([theme-in-app]) {
    --link-color: light-dark(var(--color-blue-60), var(--color-cyan-30));
    --link-color-hover: light-dark(var(--color-blue-70), var(--color-cyan-20));
    --link-color-active: light-dark(var(--color-blue-80), var(--color-cyan-10));
    --tabs-navbar-separator-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
    --color-accent-attention: light-dark(#2ac3a2, #54ffbd);

    @media not (prefers-contrast) {
      --focus-outline-color: light-dark(#0061e0, #00ddff);
    }
  }
}

/**
 * We intentionally do not use the custom colors on linux or macOS with system
 * theme enabled, instead choosing to fall back to system colors and
 * transparencies in order to look more native.
 */
@media not ((forced-colors) or (-moz-native-theme)) {
  :root:not([lwtheme]) {
    &:where([customtitlebar]) {
      --toolbox-background-color-inactive: light-dark(rgb(235, 235, 239), rgb(31, 30, 37));
    }

    @media not -moz-pref("sidebar.revamp") {
      --chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%));
    }

    @media -moz-pref("browser.nova.enabled") {
      --chrome-content-separator-color: light-dark(rgb(201, 192, 227), rgb(16, 17, 24));
    }
  }
}