/* 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/. */

/* DO NOT EDIT this file directly, instead modify the relevant *.nova.tokens.json file
 * and run `mach buildtokens` to see your changes. */

/*
 * @backward-compat { version 155 }
 * Nova design token overrides are gated on the `browser.design-tokens.nova` pref in
 * tokens-shared.css, which is NOT enabled when HNT ships its Nova experience (gated
 * on `browser.newtabpage.activity-stream.nova.enabled`). Since the newtab extension
 * can train-hop, it cannot rely on toolkit CSS behind a pref gate. This file provides
 * those token values directly so nova/activity-stream.css is self-contained.
 * Remove this file when `browser.nova.enabled` unifies both prefs and reaches Release.
 */

:root.nova-tokens {
  /** background-color **/
  --background-color-box: light-dark(var(--color-white), var(--color-gray-70));
  --background-color-box-info: light-dark(var(--color-gray-15), var(--color-gray-65));
  --background-color-canvas: light-dark(var(--color-gray-05), var(--color-gray-85));
  --background-color-critical: light-dark(var(--color-red-10), var(--color-red-70));
  --background-color-information: light-dark(var(--color-violet-10), var(--color-violet-70));
  --background-color-success: light-dark(var(--color-green-10), var(--color-green-70));
  --background-color-warning: light-dark(var(--color-yellow-10), var(--color-yellow-70));

  /** border **/
  --border-color: light-dark(var(--color-gray-30), var(--color-gray-45));
  --border-color-deemphasized: light-dark(var(--color-gray-20), var(--color-gray-55));
  --border-color-error: light-dark(var(--color-red-50), var(--color-red-20));
  --border-color-interactive: light-dark(var(--color-gray-35), var(--color-gray-50));
  --border-color-interactive-disabled: light-dark(var(--color-gray-25), var(--color-gray-60));
  --border-color-transparent: transparent;
  --border-radius-xsmall: 4px;
  --border-radius-small: 8px;
  --border-radius-medium: 12px;
  --border-radius-xlarge: 24px;

  /** box-shadow **/
  --box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 15%), rgba(0, 0, 0, 20%));
  --box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 40%));
  --box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 2%), rgba(0, 0, 0, 6%));
  --box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 4%), rgba(0, 0, 0, 12%));

  /** button **/

  /* TODO Bug 1821203 - Gray use needs to be consolidated */
  --button-background-color: transparent;
  --button-background-color-hover: light-dark(var(--color-violet-desaturated-20), var(--color-violet-desaturated-50));
  --button-background-color-active: light-dark(var(--color-violet-desaturated-30), var(--color-violet-desaturated-40));
  --button-background-color-disabled: var(--button-background-color);
  --button-background-color-destructive: light-dark(var(--color-red-50), var(--color-red-30));
  --button-background-color-destructive-hover: light-dark(var(--color-red-60), var(--color-red-20));
  --button-background-color-destructive-active: light-dark(var(--color-red-70), var(--color-red-10));
  --button-background-color-ghost: var(--button-background-color);
  --button-background-color-ghost-disabled: var(--button-background-color-ghost);
  --button-background-color-ghost-selected: var(--button-background-color-selected);
  --button-background-color-menu: var(--button-background-color-ghost);
  --button-background-color-muted: light-dark(var(--color-gray-20), var(--color-gray-55));
  --button-background-color-muted-hover: light-dark(var(--color-gray-30), var(--color-gray-45));
  --button-background-color-muted-active: light-dark(var(--color-gray-40), var(--color-gray-35));
  --button-background-color-muted-disabled: var(--button-background-color-muted);
  --button-background-color-muted-selected: var(--button-background-color-muted-active);
  --button-background-color-primary-disabled: light-dark(var(--color-violet-desaturated-50), var(--color-violet-desaturated-40));
  --button-border-color: var(--color-accent-primary);
  --button-border-color-destructive: var(--button-border-color-ghost);
  --button-border-color-destructive-selected: var(--button-border-color-destructive);
  --button-border-color-ghost: transparent;
  --button-border-color-ghost-hover: var(--button-border-color-ghost);
  --button-border-color-ghost-active: var(--button-border-color-ghost);
  --button-border-color-ghost-disabled: var(--button-border-color-ghost);
  --button-border-color-ghost-selected: var(--button-border-color-ghost);
  --button-border-color-muted: var(--button-border-color-ghost);
  --button-border-color-muted-hover: var(--button-border-color-muted);
  --button-border-color-muted-active: var(--button-border-color-muted);
  --button-border-color-muted-disabled: var(--button-border-color-muted);
  --button-border-color-muted-selected: var(--button-border-color-muted);
  --button-border-color-primary: var(--button-border-color-ghost);
  --button-border-color-primary-selected: var(--button-border-color-primary);
  --button-border-color-selected: var(--button-border-color);
  --button-border-radius: var(--border-radius-xlarge);
  --button-opacity-disabled: 0.7;
  --button-padding-inline-small: var(--space-medium);
  --button-size-icon-small: var(--size-item-medium);
  --button-text-color: light-dark(var(--color-violet-90), var(--color-gray-0));
  --button-text-color-destructive: light-dark(var(--color-white), var(--button-text-color-primary));
  --button-text-color-destructive-disabled: var(--button-text-color-destructive);
  --button-text-color-destructive-selected: light-dark(var(--button-text-color-destructive), var(--button-text-color-destructive-active));
  --button-text-color-ghost: var(--button-text-color);
  --button-text-color-ghost-hover: var(--button-text-color-ghost);
  --button-text-color-ghost-active: var(--button-text-color-ghost);
  --button-text-color-ghost-disabled: var(--button-text-color-ghost);
  --button-text-color-menu-hover: light-dark(var(--button-text-color-ghost-hover), var(--button-text-color-hover));
  --button-text-color-menu-active: light-dark(var(--button-text-color-ghost-active), var(--button-text-color-active));
  --button-text-color-menu-disabled: light-dark(var(--button-text-color-ghost-disabled), var(--button-text-color-disabled));
  --button-text-color-menu-selected: light-dark(var(--button-text-color-ghost-selected), var(--button-text-color-selected));
  --button-text-color-muted: var(--button-text-color);
  --button-text-color-muted-hover: var(--button-text-color-muted);
  --button-text-color-muted-active: var(--button-text-color-muted);
  --button-text-color-muted-disabled: var(--button-text-color-muted);
  --button-text-color-muted-selected: var(--button-text-color-muted-active);
  --button-text-color-primary: light-dark(var(--color-white), var(--color-gray-70));
  --button-text-color-primary-active: var(--button-text-color-primary);
  --button-text-color-selected: light-dark(var(--button-text-color), var(--background-color-canvas));

  /** card **/
  --card-border-color: light-dark(rgba(0, 0, 0, 6%), rgba(255, 255, 255, 4%));
  --card-gap: var(--space-medium);
  --card-header-background-color: var(--button-background-color);
  --card-header-border-color: transparent;

  /** checkbox **/
  --checkbox-border-radius: var(--border-radius-xsmall);

  /** color **/
  --color-accent-attention: light-dark(var(--color-green-40), var(--color-green-30));
  --color-accent-primary: light-dark(var(--color-violet-50), var(--color-violet-30));
  --color-accent-primary-hover: light-dark(var(--color-violet-60), var(--color-violet-20));
  --color-accent-primary-active: light-dark(var(--color-violet-70), var(--color-violet-10));
  --color-accent-primary-selected: var(--button-background-color-primary-active);
  --color-blue-0: #ECF3F8;
  --color-blue-10: #C5EAFE;
  --color-blue-20: #A2D3FF;
  --color-blue-30: #7BB2FF;
  --color-blue-40: #5A87FD;
  --color-blue-50: #455FE7;
  --color-blue-60: #3246B0;
  --color-blue-70: #23327B;
  --color-blue-80: #17214C;
  --color-blue-90: #111524;
  --color-cyan-0: #EBF4F5;
  --color-cyan-10: #C3EEF8;
  --color-cyan-20: #8FDDF0;
  --color-cyan-30: #4CC4E1;
  --color-cyan-40: #10A4CA;
  --color-cyan-50: #0A809F;
  --color-cyan-60: #066077;
  --color-cyan-70: #034554;
  --color-cyan-80: #002D38;
  --color-cyan-90: #011C23;
  --color-gray-0: #FCFBFF;
  --color-gray-05: #F7F6FB;
  --color-gray-10: #EFEDF2;
  --color-gray-15: #E3E2E7;
  --color-gray-20: #D6D5DA;
  --color-gray-25: #C7C6CB;
  --color-gray-30: #B7B6BA;
  --color-gray-35: #A6A4A9;
  --color-gray-40: #949297;
  --color-gray-45: #817F84;
  --color-gray-50: #67666A;
  --color-gray-55: #515054;
  --color-gray-60: #3F3E42;
  --color-gray-65: #312F33;
  --color-gray-70: #252428;
  --color-gray-75: #1D1B1F;
  --color-gray-80: #171519;
  --color-gray-85: #131215;
  --color-gray-90: #121114;
  --color-green-0: #ECF4F1;
  --color-green-10: #C4F1E0;
  --color-green-20: #90E3C6;
  --color-green-30: #4ACCA6;
  --color-green-40: #11AE84;
  --color-green-50: #008865;
  --color-green-60: #06674B;
  --color-green-70: #004933;
  --color-green-80: #003020;
  --color-green-90: #001E12;
  --color-orange-0: #F8F0EC;
  --color-orange-10: #FFDBC5;
  --color-orange-20: #FEBD99;
  --color-orange-30: #FF9565;
  --color-orange-40: #F4682C;
  --color-orange-50: #CD4208;
  --color-orange-60: #9C2C05;
  --color-orange-70: #701C07;
  --color-orange-80: #461209;
  --color-orange-90: #250E0B;
  --color-pink-0: #F7EFF3;
  --color-pink-10: #FFD5EE;
  --color-pink-20: #FFB0E2;
  --color-pink-30: #F585D3;
  --color-pink-40: #DB54BF;
  --color-pink-50: #B32E9F;
  --color-pink-60: #882078;
  --color-pink-70: #5F1854;
  --color-pink-80: #3C1334;
  --color-pink-90: #1E111B;
  --color-purple-0: #FAEBFF;
  --color-purple-10: #F6D7FF;
  --color-purple-20: #E8B7FF;
  --color-purple-30: #D490FF;
  --color-purple-40: #B864EE;
  --color-purple-50: #9540C8;
  --color-purple-60: #702E98;
  --color-purple-70: #4F216B;
  --color-purple-80: #311842;
  --color-purple-90: #1A1220;
  --color-red-0: #FCF2F3;
  --color-red-10: #FFD9DF;
  --color-red-20: #FFB6BF;
  --color-red-30: #FF8998;
  --color-red-40: #ED566E;
  --color-red-50: #C52D4F;
  --color-red-60: #961E3D;
  --color-red-70: #69172D;
  --color-red-80: #42121F;
  --color-red-90: #211014;
  --color-violet-0: #F5ECFF;
  --color-violet-10: #EADDFF;
  --color-violet-20: #D4C1FF;
  --color-violet-30: #B89CFF;
  --color-violet-40: #9871FF;
  --color-violet-50: #764EDD;
  --color-violet-60: #5939A8;
  --color-violet-70: #3E2976;
  --color-violet-80: #271C48;
  --color-violet-90: #161423;
  --color-violet-desaturated-0: #F2F0F8;
  --color-violet-desaturated-10: #E7E1F8;
  --color-violet-desaturated-20: #D2C8EC;
  --color-violet-desaturated-30: #B6AAD9;
  --color-violet-desaturated-40: #9687C0;
  --color-violet-desaturated-50: #75669F;
  --color-violet-desaturated-60: #584A7D;
  --color-violet-desaturated-70: #3E315F;
  --color-violet-desaturated-80: #281D44;
  --color-violet-desaturated-90: #180E30;
  --color-yellow-0: #F9F5E6;
  --color-yellow-10: #FDE8B5;
  --color-yellow-20: #FBCC77;
  --color-yellow-30: #F3A81E;
  --color-yellow-40: #DB820E;
  --color-yellow-50: #B26100;
  --color-yellow-60: #854800;
  --color-yellow-70: #5F3100;
  --color-yellow-80: #3E1D00;
  --color-yellow-90: #270F00;

  /** icon **/
  --icon-color: var(--text-color);
  --icon-color-accent-primary-desaturated: light-dark(var(--color-violet-desaturated-60), var(--color-violet-desaturated-40));
  --icon-color-critical: light-dark(var(--color-red-50), var(--color-red-20));
  --icon-color-information: light-dark(var(--color-violet-50), var(--color-violet-20));
  --icon-color-success: light-dark(var(--color-green-50), var(--color-green-20));
  --icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-20));
  --icon-size-xsmall: var(--size-item-xsmall);
  --icon-size-small: var(--size-item-small);
  --icon-size-medium: 20px;
  --icon-size-large: var(--size-item-medium);
  --icon-size-xlarge: var(--size-item-large);

  /** info-bar **/
  --info-bar-margin-block-end: 0;

  /** page **/
  --page-main-content-width: 664px;

  /** panel **/
  --panel-background-color: var(--background-color-box);
  --panel-border-color: light-dark(var(--color-gray-10), var(--color-gray-60));
  --panel-border-radius: var(--border-radius-large);
  --panel-menuitem-border-radius: var(--button-border-radius);
  --panel-padding: var(--panel-padding-block);
  --panel-padding-block: 8px;
  --panel-text-color: var(--text-color);

  /** size **/
  --size-item-xsmall: 12px;
  --size-item-small: 16px;
  --size-item-medium: 24px;
  --size-item-large: 32px;
  --size-item-xlarge: 48px;

  /** table **/
  --table-row-background-color: var(--background-color-canvas);

  /* TODO Bug 1821203 - Gray use needs to be consolidated */
  --table-row-background-color-alternate: light-dark(var(--color-gray-20), var(--color-gray-65));

  /** text-color **/
  --text-color: light-dark(var(--color-violet-desaturated-90), var(--color-violet-desaturated-0));
  --text-color-accent-primary-selected: light-dark(var(--color-white), var(--color-gray-55));
  --text-color-error: light-dark(var(--color-red-50), var(--color-red-20));

  /** toolbar **/
  --toolbar-background-color: var(--background-color-box);
  --toolbar-field-background-color: var(--toolbar-background-color);
  --toolbar-field-background-color-focus: var(--background-color-box);
  --toolbar-field-border-color: light-dark(var(--color-gray-20), var(--color-gray-60));
  --toolbar-field-border-color-focus: #FFF;
  --toolbar-field-text-color: light-dark(var(--color-violet-desaturated-70), var(--color-violet-desaturated-10));
  --toolbar-field-text-color-focus: var(--toolbar-field-text-color);
  --toolbar-padding-inline: 6px;

  /** toolbarbutton **/
  --toolbarbutton-background-color-hover: light-dark(rgba(117, 102, 159, 25%), rgba(182, 170, 217, 25%));
  --toolbarbutton-background-color-active: light-dark(rgba(117, 102, 159, 40%), rgba(182, 170, 217, 40%));
  --toolbarbutton-icon-fill: light-dark(var(--color-violet-desaturated-50), var(--color-violet-desaturated-10));
  --toolbarbutton-icon-fill-attention: var(--color-accent-primary);
  --toolbarbutton-opacity-disabled: 0.4;
  --toolbarbutton-outline-color: transparent;
  --toolbarbutton-outline-color-hover: transparent;
  --toolbarbutton-outline-color-active: transparent;
  --toolbarbutton-outline-color-selected: var(--toolbarbutton-outline-color-active);
  --toolbarbutton-outline-offset: -1px;
  --toolbarbutton-padding-inner-touch-narrow: 0;

  /** toolbox **/
  --toolbox-background-color-gradient-leading: light-dark(var(--color-violet-10), var(--color-violet-desaturated-70));
  --toolbox-background-color-gradient-trailing: light-dark(var(--color-orange-10), var(--color-orange-70));
  --toolbox-background-color-inactive: transparent;

  /* This gradient is only used for Nova */
  --toolbox-background-gradient: linear-gradient(96deg, color-mix(var(--toolbox-background-color-gradient-leading) 50%, transparent) 39.84%, color-mix(var(--toolbox-background-color-gradient-trailing) 50%, transparent) 101.72%);
  --toolbox-text-color: var(--text-color);
  --toolbox-text-color-inactive: var(--text-color-deemphasized);
}

@media (forced-colors) {
  :root.nova-tokens {
    /** background-color **/
    --background-color-box: var(--background-color-canvas);
    --background-color-box-info: var(--background-color-canvas);
    --background-color-canvas: Canvas;
    --background-color-critical: var(--background-color-canvas);
    --background-color-information: var(--background-color-canvas);
    --background-color-success: var(--background-color-canvas);
    --background-color-warning: var(--background-color-canvas);

    /** border **/
    --border-color: CanvasText;
    --border-color-deemphasized: CanvasText;
    --border-color-error: var(--border-color);
    --border-color-interactive: ButtonText;
    --border-color-interactive-disabled: GrayText;
    --border-color-transparent: CanvasText;

    /** box-shadow **/
    --box-shadow-color-darker-layer-1: transparent;
    --box-shadow-color-darker-layer-2: transparent;
    --box-shadow-color-lighter-layer-1: transparent;
    --box-shadow-color-lighter-layer-2: transparent;

    /** button **/

    /* TODO Bug 1821203 - Gray use needs to be consolidated */
    --button-background-color: ButtonFace;
    --button-background-color-hover: SelectedItemText;
    --button-background-color-active: SelectedItemText;
    --button-background-color-destructive: var(--button-background-color-primary);
    --button-background-color-destructive-hover: var(--button-background-color-primary-hover);
    --button-background-color-destructive-active: var(--button-background-color-primary-active);
    --button-background-color-ghost-disabled: var(--button-background-color-disabled);
    --button-background-color-menu: var(--button-background-color);
    --button-background-color-muted: var(--button-background-color);
    --button-background-color-muted-hover: var(--button-background-color-hover);
    --button-background-color-muted-active: var(--button-background-color-active);
    --button-background-color-muted-disabled: var(--button-background-color);
    --button-background-color-muted-selected: var(--button-background-color-ghost-active);
    --button-background-color-primary-disabled: GrayText;
    --button-border-color: var(--border-color-interactive);
    --button-border-color-destructive: var(--button-border-color-primary);
    --button-border-color-destructive-selected: var(--button-border-color-destructive-active);
    --button-border-color-ghost: var(--button-border-color);
    --button-border-color-ghost-hover: var(--button-border-color-hover);
    --button-border-color-ghost-active: var(--button-border-color-active);
    --button-border-color-ghost-disabled: var(--button-border-color-disabled);
    --button-border-color-ghost-selected: var(--button-border-color-ghost-active);
    --button-border-color-muted: var(--button-border-color);
    --button-border-color-muted-hover: var(--button-border-color-hover);
    --button-border-color-muted-active: var(--button-border-color-active);
    --button-border-color-muted-disabled: var(--button-border-color-disabled);
    --button-border-color-muted-selected: var(--button-border-color-ghost-active);
    --button-border-color-primary: ButtonFace;
    --button-border-color-primary-selected: var(--button-border-color-primary-active);
    --button-border-color-selected: var(--button-border-color-active);
    --button-opacity-disabled: 1;
    --button-text-color: ButtonText;
    --button-text-color-destructive: var(--button-text-color-primary);
    --button-text-color-destructive-disabled: var(--button-text-color-primary);
    --button-text-color-destructive-selected: var(--button-text-color-destructive-active);
    --button-text-color-ghost: ButtonText;
    --button-text-color-ghost-hover: var(--button-text-color-ghost-active);
    --button-text-color-ghost-active: var(--button-text-color-active);
    --button-text-color-ghost-disabled: GrayText;
    --button-text-color-menu-hover: var(--button-text-color-primary);
    --button-text-color-menu-active: var(--button-text-color-primary-active);
    --button-text-color-menu-disabled: var(--button-text-color-primary-disabled);
    --button-text-color-menu-selected: var(--button-text-color-primary-selected);
    --button-text-color-muted: ButtonText;
    --button-text-color-muted-hover: var(--button-text-color-ghost-active);
    --button-text-color-muted-active: var(--button-text-color-active);
    --button-text-color-muted-disabled: GrayText;
    --button-text-color-muted-selected: var(--button-text-color-ghost-active);
    --button-text-color-primary: ButtonFace;
    --button-text-color-primary-active: var(--button-text-color-primary-hover);
    --button-text-color-selected: SelectedItemText;

    /** card **/
    --card-border-color: CanvasText;
    --card-header-border-color: var(--button-border-color);

    /** color **/
    --color-accent-attention: AccentColor;
    --color-accent-primary: AccentColor;
    --color-accent-primary-hover: SelectedItem;
    --color-accent-primary-active: var(--color-accent-primary-hover);
    --color-accent-primary-selected: SelectedItem;

    /** icon **/
    --icon-color-accent-primary-desaturated: CanvasText;
    --icon-color-critical: var(--icon-color);
    --icon-color-information: var(--icon-color);
    --icon-color-success: var(--icon-color);
    --icon-color-warning: var(--icon-color);

    /** panel **/
    --panel-border-color: var(--border-color);

    /** table **/

    /* TODO Bug 1821203 - Gray use needs to be consolidated */
    --table-row-background-color-alternate: var(--background-color-canvas);

    /** text-color **/
    --text-color-accent-primary-selected: SelectedItemText;

    /** toolbar **/
    --toolbar-background-color: Canvas;
    --toolbar-field-border-color: ButtonText;
    --toolbar-field-border-color-focus: SelectedItem;
    --toolbar-field-text-color: var(--text-color);

    /** toolbarbutton **/
    --toolbarbutton-background-color-hover: var(--button-background-color-hover);
    --toolbarbutton-background-color-active: var(--button-background-color-active);
    --toolbarbutton-icon-fill: var(--button-text-color);
    --toolbarbutton-outline-color: var(--button-border-color);
    --toolbarbutton-outline-color-hover: var(--button-border-color-hover);
    --toolbarbutton-outline-color-active: var(--button-border-color-active);

    /** toolbox **/
    --toolbox-background-color-gradient-leading: Canvas;
    --toolbox-background-color-gradient-trailing: Canvas;

    /* This gradient is only used for Nova */
    --toolbox-background-gradient: image(transparent);
  }
}