/**
 * @generated -- This file is automatically generated from @ebay/design-tokens
 * @version 2.4.3
 * 
 * Evo theme (dark mode)
 */

@mixin evo-dark {
    --color-ai-solid-blue-strong: #0968F6;
    --color-ai-solid-blue-subtle: #112C31;
    --color-ai-solid-green-strong: #4EE04B;
    --color-ai-solid-green-subtle: #112611;
    --color-ai-solid-purple-strong: #993EE0;
    --color-ai-solid-purple-subtle: #20172F;
    --color-ai-solid-red-strong: #ff4242;
    --color-ai-solid-red-subtle: #321919;
    --color-ai-solid-yellow-strong: #FFD80E;
    --color-background-accent: var(--color-blue-400); /** A background color indicating interaction and guidance. **/
    --color-background-attention: var(--color-red-400); /** Indicates an error or issue has occured that requires attention. **/
    --color-background-disabled: var(--color-neutral-600); /** Indicates that an element isn't interactive. **/
    --color-background-education: var(--color-indigo-800); /** For elements that educate users on new features and functionality **/
    --color-background-elevated: var(--color-neutral-800); /** Used on elevated surfaces like sheets, menus, and tips. **/
    --color-background-inverse: var(--color-neutral-300); /** For surfaces that need more visual prominence. **/
    --color-background-on-image: rgba(0, 0, 0, 0.9); /** For elements that need to be placed over an image **/
    --color-background-on-secondary: var(--color-neutral-900); /** Provides shape for elements using background.secondary over another element using background.secondary. **/
    --color-background-primary: var(--color-neutral-900); /** The base background color for most screens. **/
    --color-background-secondary-on-elevated: var(--color-neutral-900); /** Provides appropriate contrast for elements on elevated backgrounds. **/
    --color-background-secondary: var(--color-neutral-800); /** An off-white background to provide subtle contrast against a primary background. **/
    --color-background-strong: var(--color-neutral-200); /** For interactive surfaces that need more prominent active state. **/
    --color-background-success: var(--color-kiwi-500); /** Indicates a successful or positive action. **/
    --color-background-tertiary: var(--color-neutral-700); /** For additional elements and controls commonly placed above background.secondary **/
    --color-background-transparent: var(--color-clear); /** For elements that need a fill value but remain fully transparent **/
    --color-background-warning: var(--color-yellow-400); /** Indicates a warning or cautionary action. **/
    --color-border-accent: var(--color-blue-400); /** Signifies the boundary of an interactive element. **/
    --color-border-attention: var(--color-red-400); /** Signifies that an issue has occurred that requires attention. **/
    --color-border-disabled: var(--color-neutral-700); /** Signifies the boundary of disabled interactive element. **/
    --color-border-inverse: var(--color-neutral-900); /** Used when appearing over a surface using background.inverse to blend in with the background (eg, representing a cutout). **/
    --color-border-medium: var(--color-neutral-600); /** Contains content or signifies the boundary of an interactive element. **/
    --color-border-on-accent: var(--color-neutral-800); /** Used when appearing over a surface using background.accent to maintain contrast. **/
    --color-border-on-attention: var(--color-neutral-800); /** Used when appearing over a surface using background.attention to maintain contrast. **/
    --color-border-on-disabled: var(--color-neutral-800); /** Used when appearing over a surface using background.disabled to maintain contrast. **/
    --color-border-on-inverse: var(--color-neutral-800); /** Used when appearing over a surface using background.inverse to maintain contrast. **/
    --color-border-on-success: var(--color-neutral-800); /** Used when appearing over a surface using background.success to maintain contrast. **/
    --color-border-strong: var(--color-neutral-100); /** For selected elements with a border **/
    --color-border-subtle: var(--color-neutral-700); /** Decoration for non-interactive content, dividers, and separators. **/
    --color-border-success: var(--color-kiwi-500); /** Signifies the successful completion of a task or process. **/
    --color-brand-1: var(--color-red-500); /** Primary logo color **/
    --color-brand-2: var(--color-blue-500); /** Secondary logo color **/
    --color-brand-3: var(--color-yellow-400); /** Tertiary logo color **/
    --color-brand-4: var(--color-green-500); /** Quaternary logo color **/
    --color-foreground-accent: var(--color-blue-400); /** For interactive text and iconography. **/
    --color-foreground-attention: var(--color-red-400); /** To call attention to issues and errors with text and iconography. **/
    --color-foreground-disabled: var(--color-neutral-600); /** For disabled foreground elements like text and iconography. **/
    --color-foreground-link-legal: var(--color-blue-400); /** For legal links **/
    --color-foreground-link-primary: var(--color-foreground-primary); /** For primary links **/
    --color-foreground-link-visited: var(--color-pink-400); /** Indicates a link as been visited. **/
    --color-foreground-on-accent: var(--color-neutral-800); /** Used for text and icons on surfaces using background.accent. **/
    --color-foreground-on-attention: var(--color-neutral-800); /** Used for text and icons on surfaces using background.attention. **/
    --color-foreground-on-disabled: var(--color-neutral-800); /** Used for text and icons on surfaces using background.disabled. **/
    --color-foreground-on-inverse: var(--color-neutral-800); /** Used for text and icons on surfaces using background.inverse. **/
    --color-foreground-on-strong: var(--color-neutral-800); /** Used for text and icons on surfaces using background.strong. **/
    --color-foreground-on-success: var(--color-neutral-800); /** Used for text and icons on surfaces using background.success. **/
    --color-foreground-on-warning: var(--color-neutral-800); /** Used for text and icons on surfaces using background.warning. **/
    --color-foreground-primary: var(--color-neutral-200); /** For prominent and primary text and iconography. **/
    --color-foreground-secondary: var(--color-neutral-500); /** For less prominent and secondary text and iconography. **/
    --color-foreground-success: var(--color-kiwi-400); /** To highlight successful completion of an action with text and iconography. **/
    --color-foreground-warning: var(--color-yellow-400); /** To call attention to warning or cautionary issues with text and iconography. **/
    --color-gradient-ai-blue-strong: linear-gradient(to right, var(--color-ai-solid-purple-strong), var(--color-ai-solid-blue-strong) 50%, var(--color-ai-solid-green-strong) 100%);
    --color-gradient-ai-blue-subtle: linear-gradient(to right, var(--color-ai-solid-purple-subtle), var(--color-ai-solid-blue-subtle) 50%, var(--color-ai-solid-green-subtle) 100%); /** For color wash **/
    --color-gradient-ai-full-color-diagonal: linear-gradient(135deg, var(--color-ai-solid-green-strong) 10%, var(--color-ai-solid-blue-strong) 27%, var(--color-ai-solid-purple-strong) 42%, var(--color-ai-solid-red-strong) 56%, var(--color-ai-solid-yellow-strong) 78%); /** To be used in the ai sparkle icon **/
    --color-gradient-ai-green-strong: linear-gradient(to right, var(--color-ai-solid-blue-strong), var(--color-ai-solid-green-strong) 100%);
    --color-gradient-ai-green-subtle: linear-gradient(to right, var(--color-ai-solid-blue-subtle), var(--color-ai-solid-green-subtle) 100%); /** For color wash **/
    --color-gradient-ai-purple-strong: linear-gradient(to right, var(--color-ai-solid-red-strong), var(--color-ai-solid-purple-strong) 100%);
    --color-gradient-ai-purple-subtle: linear-gradient(to right, var(--color-ai-solid-red-subtle), var(--color-ai-solid-purple-subtle) 100%); /** For color wash **/
    --color-gradient-image-scrim: linear-gradient(to right, rgba(248, 248, 248, 0) 52%, rgba(248, 248, 248, 0.03) 100%);
    --color-gradient-loading-shimmer-on-secondary: linear-gradient(to right, rgba(35, 35, 35, 0), rgba(35, 35, 35, 0.6) 25%, rgba(35, 35, 35, 0.85) 37%, rgba(35, 35, 35, 0.95) 48%, rgba(35, 35, 35, 0.95) 51%, rgba(35, 35, 35, 0.85) 61%, rgba(35, 35, 35, 0.6) 74%, rgba(35, 35, 35, 0) 100%); /** DEPRECATED: Replace with --color-loading-on-secondary-state-1 for skeleton loading components on secondary backgrounds in their initial state, and --color-loading-on-secondary-state-2 for all other skeleton loading components. **/
    --color-gradient-loading-shimmer: linear-gradient(to right, rgba(27, 27, 27, 0), rgba(27, 27, 27, 0.6) 25%, rgba(27, 27, 27, 0.85) 37%, rgba(27, 27, 27, 0.95) 48%, rgba(27, 27, 27, 0.95) 51%, rgba(27, 27, 27, 0.85) 61%, rgba(27, 27, 27, 0.6) 74%, rgba(27, 27, 27, 0) 100%); /** DEPRECATED: Replace with --color-loading-on-primary-state-1 for skeleton loading components on primary backgrounds in their initial state, and --color-loading-on-primary-state-2 for all other skeleton loading components. **/
    --color-loading-fill-on-secondary: #353535; /** DEPRECATED: Replace with --color-loading-on-secondary-state-1 for skeleton loading components on secondary backgrounds in their initial state, and --color-loading-on-secondary-state-2 for all other skeleton loading components. **/
    --color-loading-fill: #2d2d2d; /** DEPRECATED: Replace with --color-loading-on-primary-state-1 for skeleton loading components on primary backgrounds in their initial state, and --color-loading-on-primary-state-2 for all other skeleton loading components. **/
    --color-loading-on-primary-state-1: var(--color-neutral-800); /** For skeleton loading components on primary backgrounds in their initial state. **/
    --color-loading-on-primary-state-2: var(--color-neutral-700); /** For skeleton loading components on primary backgrounds in their secondary state. **/
    --color-loading-on-secondary-state-1: var(--color-neutral-700); /** For skeleton loading components on secondary backgrounds in their initial state. **/
    --color-loading-on-secondary-state-2: var(--color-neutral-600); /** For skeleton loading components on secondary backgrounds in their secondary state. **/
    --color-scrim-background: rgba(0, 0, 0, 0.64); /** Scrim color for dialogs and flyouts **/
    --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08); /** State layer for focused elements on strong backgrounds **/
    --color-state-layer-focus: rgba(255, 255, 255, 0.08); /** State layer for focused elements **/
    --color-state-layer-hover-on-selected: rgba(255, 255, 255, 0.32); /** State layer for selected elements that are hovered **/
    --color-state-layer-hover-on-strong: rgba(0, 0, 0, 0.08); /** State layer for hovered elements on strong backgrounds **/
    --color-state-layer-hover: rgba(255, 255, 255, 0.08); /** State layer for hovered elements **/
    --color-state-layer-pressed-on-strong: rgba(0, 0, 0, 0.12); /** State layer for pressed elements on strong backgrounds **/
    --color-state-layer-pressed: rgba(255, 255, 255, 0.12); /** State layer for pressed elements **/
    --color-state-layer-selected-on-strong: rgba(0, 0, 0, 0.16); /** State layer for selected elements on strong backgrounds **/
    --color-state-layer-selected: rgba(255, 255, 255, 0.16); /** State layer for selected elements **/
}