/** * Copyright 2025 Q-CTRL. All rights reserved. * * Licensed under the Q-CTRL Terms of service (the "License"). Unauthorized * copying or use of this file, via any medium, is strictly prohibited. * Proprietary and confidential. You may not use this file except in compliance * with the License. You may obtain a copy of the License at * * https://q-ctrl.com/terms * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS. See the * License for the specific language. * * This file is auto-generated from Figma variables. Do not edit it directly. */ @layer base { .dark { --color-color-surface-overlay: var(--color-gray-700); --color-color-surface-bright: var(--color-gray-700); --color-color-surface-default: var(--color-gray-800); --color-color-background-info-subtlest: var(--color-blue-900); --color-color-background-info-subtler: var(--color-blue-800); --color-color-background-info-subtler-hover: var(--color-blue-700); --color-color-background-info-subtler-press: var(--color-blue-900); --color-color-background-info-strong: var(--color-blue-400); --color-color-background-info-strong-hover: var(--color-blue-300); --color-color-text-subtle: var(--color-gray-400); --color-color-background-info-strong-press: var(--color-blue-500); --color-color-background-success-subtlest: var(--color-green-900); --color-color-background-success-subtler: var(--color-green-800); --color-color-background-success-subtler-hover: var(--color-green-700); --color-color-background-success-subtler-press: var(--color-green-900); --color-color-background-success-strong: var(--color-green-400); --color-color-background-success-strong-hover: var(--color-green-300); --color-color-background-success-strong-press: var(--color-green-500); --color-color-background-warning-subtlest: var(--color-yellow-900); --color-color-background-warning-subtler: var(--color-yellow-800); --color-color-background-warning-subtler-hover: var(--color-yellow-700); --color-color-background-warning-subtler-press: var(--color-yellow-900); --color-color-background-warning-strong: var(--color-yellow-400); --color-color-background-warning-strong-hover: var(--color-yellow-300); --color-color-background-warning-strong-press: var(--color-yellow-500); --color-color-background-danger-subtlest: var(--color-red-900); --color-color-background-danger-subtler: var(--color-red-800); --color-color-background-danger-subtler-hover: var(--color-red-700); --color-color-background-danger-subtler-press: var(--color-red-900); --color-color-background-danger-strong: var(--color-red-400); --color-color-background-danger-strong-hover: var(--color-red-300); --color-color-background-danger-strong-press: var(--color-red-500); --color-color-background-interactive-subtler: var(--color-violet-800); --color-color-background-interactive-subtler-hover: var(--color-violet-700); --color-color-background-interactive-subtler-press: var(--color-violet-900); --color-color-background-interactive-strong: var(--color-violet-400); --color-color-background-interactive-strong-hover: var(--color-violet-300); --color-color-background-interactive-strong-press: var(--color-violet-500); --color-color-background-brand-default: var(--color-violet-500); --color-color-background-brand-default-hover: var(--color-violet-400); --color-color-background-brand-default-press: var(--color-violet-600); --color-color-background-overlay-default: var(--color-gray-900-a85); --color-color-background-inverse-default: var(--color-gray-100); --color-color-background-inverse-default-hover: var(--color-gray-0); --color-color-background-inverse-default-press: var(--color-gray-200); --color-color-background-light-default: var(--color-gray-0); --color-color-background-dark-default: var(--color-gray-800); --color-color-background-dark-default-hover: var(--color-gray-700); --color-color-background-dark-default-press: var(--color-gray-900); --color-color-background-light-default-hover: var(--color-white); --color-color-background-light-default-press: var(--color-gray-100); --color-color-background-accent-gray-subtlest: var(--color-gray-700); --color-color-background-accent-gray-subtlest-hover: var(--color-gray-600); --color-color-background-accent-gray-subtlest-press: var(--color-gray-800); --color-color-background-accent-gray-subtler: var(--color-gray-600); --color-color-background-accent-gray-subtler-hover: var(--color-gray-500); --color-color-background-accent-gray-subtler-press: var(--color-gray-700); --color-color-background-accent-gray-subtle: var(--color-gray-500); --color-color-background-accent-gray-subtle-hover: var(--color-gray-400); --color-color-background-accent-gray-subtle-press: var(--color-gray-600); --color-color-background-accent-gray-stronger: var(--color-gray-200); --color-color-background-accent-gray-stronger-hover: var(--color-gray-100); --color-color-background-accent-gray-stronger-press: var(--color-gray-300); --color-color-background-accent-violet-subtlest: var(--color-violet-700); --color-color-background-accent-violet-subtlest-hover: var( --color-violet-600 ); --color-color-background-accent-violet-subtlest-press: var( --color-violet-800 ); --color-color-background-accent-violet-subtler: var(--color-violet-600); --color-color-background-accent-violet-subtler-hover: var( --color-violet-500 ); --color-color-background-accent-violet-subtler-press: var( --color-violet-700 ); --color-color-background-accent-violet-subtle: var(--color-violet-500); --color-color-background-accent-violet-subtle-hover: var( --color-violet-400 ); --color-color-background-accent-violet-subtle-press: var( --color-violet-600 ); --color-color-background-accent-violet-stronger: var(--color-violet-200); --color-color-background-accent-violet-stronger-hover: var( --color-violet-100 ); --color-color-background-accent-violet-stronger-press: var( --color-violet-300 ); --color-color-background-accent-blue-subtlest: var(--color-blue-700); --color-color-background-accent-blue-subtlest-hover: var(--color-blue-600); --color-color-background-accent-blue-subtlest-press: var(--color-blue-800); --color-color-background-accent-blue-subtler: var(--color-blue-600); --color-color-background-accent-blue-subtler-hover: var(--color-blue-500); --color-color-background-accent-blue-subtler-press: var(--color-blue-700); --color-color-background-accent-blue-subtle: var(--color-blue-500); --color-color-background-accent-blue-subtle-hover: var(--color-blue-400); --color-color-background-accent-blue-subtle-press: var(--color-blue-600); --color-color-background-accent-blue-stronger: var(--color-blue-200); --color-color-background-accent-blue-stronger-hover: var(--color-blue-100); --color-color-background-accent-blue-stronger-press: var(--color-blue-300); --color-color-background-accent-teal-subtlest: var(--color-teal-700); --color-color-background-accent-teal-subtlest-hover: var(--color-teal-600); --color-color-background-accent-teal-subtlest-press: var(--color-teal-800); --color-color-background-accent-teal-subtler: var(--color-teal-600); --color-color-background-accent-teal-subtler-hover: var(--color-teal-500); --color-color-background-accent-teal-subtler-press: var(--color-teal-700); --color-color-background-accent-teal-subtle: var(--color-teal-500); --color-color-background-accent-teal-subtle-hover: var(--color-teal-400); --color-color-background-accent-teal-subtle-press: var(--color-teal-600); --color-color-background-accent-teal-stronger: var(--color-teal-200); --color-color-background-accent-teal-stronger-hover: var(--color-teal-100); --color-color-background-accent-teal-stronger-press: var(--color-teal-300); --color-color-background-accent-green-subtlest: var(--color-green-700); --color-color-background-accent-green-subtlest-hover: var( --color-green-600 ); --color-color-background-accent-green-subtlest-press: var( --color-green-800 ); --color-color-background-accent-green-subtler: var(--color-green-600); --color-color-background-accent-green-subtler-hover: var(--color-green-500); --color-color-background-accent-green-subtler-press: var(--color-green-700); --color-color-background-accent-green-subtle: var(--color-green-500); --color-color-background-accent-green-subtle-hover: var(--color-green-400); --color-color-background-accent-green-subtle-press: var(--color-green-600); --color-color-background-accent-green-stronger: var(--color-green-200); --color-color-background-accent-green-stronger-hover: var( --color-green-100 ); --color-color-background-accent-green-stronger-press: var( --color-green-300 ); --color-color-background-accent-yellow-subtlest: var(--color-yellow-700); --color-color-background-accent-yellow-subtlest-hover: var( --color-yellow-600 ); --color-color-background-accent-yellow-subtlest-press: var( --color-yellow-800 ); --color-color-background-accent-yellow-subtler: var(--color-yellow-600); --color-color-background-accent-yellow-subtler-hover: var( --color-yellow-500 ); --color-color-background-accent-yellow-subtler-press: var( --color-yellow-700 ); --color-color-background-accent-yellow-subtle: var(--color-yellow-500); --color-color-background-accent-yellow-subtle-hover: var( --color-yellow-400 ); --color-color-background-accent-yellow-subtle-press: var( --color-yellow-600 ); --color-color-background-accent-yellow-stronger: var(--color-yellow-200); --color-color-background-accent-yellow-stronger-hover: var( --color-yellow-100 ); --color-color-background-accent-yellow-stronger-press: var( --color-yellow-300 ); --color-color-background-accent-orange-subtlest: var(--color-orange-700); --color-color-background-accent-orange-subtlest-hover: var( --color-orange-600 ); --color-color-background-accent-orange-subtlest-press: var( --color-orange-800 ); --color-color-background-accent-orange-subtler: var(--color-orange-600); --color-color-background-accent-orange-subtler-hover: var( --color-orange-500 ); --color-color-background-accent-orange-subtler-press: var( --color-orange-700 ); --color-color-background-accent-orange-subtle: var(--color-orange-500); --color-color-background-accent-orange-subtle-hover: var( --color-orange-400 ); --color-color-background-accent-orange-subtle-press: var( --color-orange-600 ); --color-color-background-accent-orange-stronger: var(--color-orange-200); --color-color-background-accent-orange-stronger-hover: var( --color-orange-100 ); --color-color-background-accent-orange-stronger-press: var( --color-orange-300 ); --color-color-background-accent-red-subtlest: var(--color-red-700); --color-color-background-accent-red-subtlest-hover: var(--color-red-600); --color-color-background-accent-red-subtlest-press: var(--color-red-800); --color-color-background-accent-red-subtler: var(--color-red-600); --color-color-background-accent-red-subtler-hover: var(--color-red-500); --color-color-background-accent-red-subtler-press: var(--color-red-700); --color-color-background-accent-red-subtle: var(--color-red-500); --color-color-background-accent-red-subtle-hover: var(--color-red-400); --color-color-background-accent-red-subtle-press: var(--color-red-600); --color-color-background-accent-red-stronger: var(--color-red-200); --color-color-background-accent-red-stronger-hover: var(--color-red-100); --color-color-background-accent-red-stronger-press: var(--color-red-300); --color-color-background-accent-pink-subtlest: var(--color-pink-700); --color-color-background-accent-pink-subtlest-hover: var(--color-pink-600); --color-color-background-accent-pink-subtlest-press: var(--color-pink-800); --color-color-background-accent-pink-subtler: var(--color-pink-600); --color-color-background-accent-pink-subtler-hover: var(--color-pink-500); --color-color-background-accent-pink-subtler-press: var(--color-pink-700); --color-color-background-accent-pink-subtle: var(--color-pink-500); --color-color-background-accent-pink-subtle-hover: var(--color-pink-400); --color-color-background-accent-pink-subtle-press: var(--color-pink-600); --color-color-background-accent-pink-stronger: var(--color-pink-200); --color-color-background-accent-pink-stronger-hover: var(--color-pink-100); --color-color-background-accent-pink-stronger-press: var(--color-pink-300); --color-color-background-accent-gradient-gray-default-stop-1: var( --color-gray-400 ); --color-color-background-accent-gradient-gray-default-stop-2: var( --color-gray-500 ); --color-color-background-accent-gradient-gray-strong-stop-1: var( --color-gray-500 ); --color-color-background-accent-gradient-gray-strong-stop-2: var( --color-gray-600 ); --color-color-background-accent-gradient-gray-stronger-stop-1: var( --color-gray-600 ); --color-color-background-accent-gradient-gray-stronger-stop-2: var( --color-gray-700 ); --color-color-background-accent-gradient-violet-default-stop-1: var( --color-violet-400 ); --color-color-background-accent-gradient-violet-default-stop-2: var( --color-violet-500 ); --color-color-background-accent-gradient-violet-strong-stop-1: var( --color-violet-500 ); --color-color-background-accent-gradient-violet-strong-stop-2: var( --color-violet-600 ); --color-color-background-accent-gradient-violet-stronger-stop-1: var( --color-violet-600 ); --color-color-background-accent-gradient-violet-stronger-stop-2: var( --color-violet-700 ); --color-color-background-accent-gradient-blue-default-stop-1: var( --color-blue-400 ); --color-color-background-accent-gradient-blue-default-stop-2: var( --color-blue-500 ); --color-color-background-accent-gradient-blue-strong-stop-1: var( --color-blue-500 ); --color-color-background-accent-gradient-blue-strong-stop-2: var( --color-blue-600 ); --color-color-background-accent-gradient-blue-stronger-stop-1: var( --color-blue-600 ); --color-color-background-accent-gradient-blue-stronger-stop-2: var( --color-blue-700 ); --color-color-background-accent-gradient-teal-default-stop-1: var( --color-teal-400 ); --color-color-background-accent-gradient-teal-default-stop-2: var( --color-teal-500 ); --color-color-background-accent-gradient-teal-strong-stop-1: var( --color-teal-500 ); --color-color-background-accent-gradient-teal-strong-stop-2: var( --color-teal-600 ); --color-color-background-accent-gradient-teal-stronger-stop-1: var( --color-teal-600 ); --color-color-background-accent-gradient-teal-stronger-stop-2: var( --color-teal-700 ); --color-color-background-accent-gradient-green-default-stop-1: var( --color-green-400 ); --color-color-background-accent-gradient-green-default-stop-2: var( --color-green-500 ); --color-color-background-accent-gradient-green-strong-stop-1: var( --color-green-500 ); --color-color-background-accent-gradient-green-strong-stop-2: var( --color-green-600 ); --color-color-background-accent-gradient-green-stronger-stop-1: var( --color-green-600 ); --color-color-background-accent-gradient-green-stronger-stop-2: var( --color-green-700 ); --color-color-background-accent-gradient-yellow-default-stop-1: var( --color-yellow-400 ); --color-color-background-accent-gradient-yellow-default-stop-2: var( --color-yellow-500 ); --color-color-background-accent-gradient-yellow-strong-stop-1: var( --color-yellow-500 ); --color-color-background-accent-gradient-yellow-strong-stop-2: var( --color-yellow-600 ); --color-color-background-accent-gradient-yellow-stronger-stop-1: var( --color-yellow-600 ); --color-color-background-accent-gradient-yellow-stronger-stop-2: var( --color-yellow-700 ); --color-color-background-accent-gradient-orange-default-stop-1: var( --color-orange-400 ); --color-color-background-accent-gradient-orange-default-stop-2: var( --color-orange-500 ); --color-color-background-accent-gradient-orange-strong-stop-1: var( --color-orange-500 ); --color-color-background-accent-gradient-orange-strong-stop-2: var( --color-orange-600 ); --color-color-background-accent-gradient-orange-stronger-stop-1: var( --color-orange-600 ); --color-color-background-accent-gradient-orange-stronger-stop-2: var( --color-orange-700 ); --color-color-background-accent-gradient-red-default-stop-1: var( --color-red-400 ); --color-color-background-accent-gradient-red-default-stop-2: var( --color-red-500 ); --color-color-background-accent-gradient-red-strong-stop-1: var( --color-red-500 ); --color-color-background-accent-gradient-red-strong-stop-2: var( --color-red-600 ); --color-color-background-accent-gradient-red-stronger-stop-1: var( --color-red-600 ); --color-color-background-accent-gradient-red-stronger-stop-2: var( --color-red-700 ); --color-color-background-accent-gradient-pink-default-stop-1: var( --color-pink-400 ); --color-color-background-accent-gradient-pink-default-stop-2: var( --color-pink-500 ); --color-color-background-accent-gradient-pink-strong-stop-1: var( --color-pink-500 ); --color-color-background-accent-gradient-pink-strong-stop-2: var( --color-pink-600 ); --color-color-background-accent-gradient-pink-stronger-stop-1: var( --color-pink-600 ); --color-color-background-accent-gradient-pink-stronger-stop-2: var( --color-pink-700 ); --color-color-text-default: var(--color-gray-300); --color-color-link-subtle: var(--color-gray-400); --color-color-link-default: var(--color-violet-300); --color-color-link-default-active: var(--color-violet-400); --color-color-link-hover: var(--color-violet-200); --color-color-link-press: var(--color-violet-400); --color-color-text-strong: var(--color-gray-200); --color-color-text-stronger: var(--color-gray-0); --color-color-text-info: var(--color-blue-300); --color-color-text-success: var(--color-green-300); --color-color-text-warning: var(--color-yellow-300); --color-color-text-danger: var(--color-red-400); --color-color-text-interactive: var(--color-violet-300); --color-color-text-brand: var(--color-violet-300); --color-color-text-light: var(--color-gray-0); --color-color-text-inverse: var(--color-gray-0); --color-color-text-on-inverse: var(--color-violet-800); --color-color-text-dark: var(--color-gray-700); --color-color-border-subtler: var(--color-gray-600); --color-color-border-subtle: var(--color-gray-400); --color-color-border-strong: var(--color-gray-300); --color-color-border-stronger: var(--color-gray-200); --color-color-border-info: var(--color-blue-400); --color-color-border-success: var(--color-green-400); --color-color-border-warning: var(--color-yellow-400); --color-color-border-danger: var(--color-red-400); --color-color-border-interactive: var(--color-violet-400); --color-color-border-interactive-hover: var(--color-violet-300); --color-color-border-interactive-press: var(--color-violet-500); --color-color-border-accent-gray-default: var(--color-gray-300); --color-color-border-focus: var(--color-violet-400-a75); --color-color-border-inverse: var(--color-gray-100); --color-color-border-light-subtler: var(--color-gray-600); --color-color-border-light-strongest: var(--color-gray-0); --color-color-border-accent-gray-stronger: var(--color-gray-200); --color-color-border-accent-violet-default: var(--color-violet-300); --color-color-border-accent-violet-stronger: var(--color-violet-200); --color-color-border-accent-blue-default: var(--color-blue-300); --color-color-border-accent-blue-stronger: var(--color-blue-200); --color-color-border-accent-teal-default: var(--color-teal-300); --color-color-border-accent-teal-stronger: var(--color-teal-200); --color-color-border-accent-green-default: var(--color-green-300); --color-color-border-accent-green-stronger: var(--color-green-200); --color-color-border-accent-yellow-default: var(--color-yellow-300); --color-color-border-accent-orange-default: var(--color-orange-300); --color-color-border-accent-yellow-stronger: var(--color-yellow-200); --color-color-border-accent-red-default: var(--color-red-300); --color-color-border-accent-orange-stronger: var(--color-orange-200); --color-color-border-accent-red-stronger: var(--color-red-200); --color-color-border-accent-pink-default: var(--color-pink-300); --color-color-border-accent-pink-stronger: var(--color-pink-200); --color-color-background: var(--color-gray-800); --color-color-background-strong: var(--color-gray-400); --color-color-icon-subtle: var(--color-gray-400); --color-color-icon-default: var(--color-gray-300); --color-color-icon-light-subtle: var(--color-gray-400); --color-color-icon-light-default: var(--color-gray-300); --color-color-icon-light-strong: var(--color-gray-200); --color-color-icon-light-stronger: var(--color-gray-0); --color-color-icon-strong: var(--color-gray-200); --color-color-icon-info: var(--color-blue-400); --color-color-icon-success: var(--color-green-400); --color-color-icon-warning: var(--color-yellow-400); --color-color-icon-danger: var(--color-red-400); --color-color-icon-interactive: var(--color-violet-300); --color-color-icon-brand: var(--color-violet-300); --color-color-icon-light: var(--color-gray-0); --color-color-icon-inverse: var(--color-gray-0); --color-color-icon-on-inverse: var(--color-violet-800); --color-color-icon-dark: var(--color-gray-700); --color-color-icon-accent-gray-subtlest: var(--color-gray-700); --color-color-icon-accent-gray-strong: var(--color-gray-400); --color-color-icon-accent-gray-strongest: var(--color-gray-100); --color-color-icon-accent-violet-subtlest: var(--color-violet-700); --color-color-icon-accent-violet-strong: var(--color-violet-400); --color-color-icon-accent-violet-strongest: var(--color-violet-100); --color-color-icon-accent-blue-subtlest: var(--color-blue-700); --color-color-icon-accent-blue-strong: var(--color-blue-400); --color-color-icon-accent-blue-strongest: var(--color-blue-100); --color-color-icon-accent-teal-subtlest: var(--color-teal-700); --color-color-icon-accent-teal-strong: var(--color-teal-400); --color-color-icon-accent-teal-strongest: var(--color-teal-100); --color-color-icon-accent-green-subtlest: var(--color-green-700); --color-color-icon-accent-green-strong: var(--color-green-400); --color-color-icon-accent-green-strongest: var(--color-green-100); --color-color-icon-accent-yellow-subtlest: var(--color-yellow-700); --color-color-icon-accent-yellow-strong: var(--color-yellow-400); --color-color-icon-accent-yellow-strongest: var(--color-yellow-100); --color-color-icon-accent-orange-subtlest: var(--color-orange-700); --color-color-icon-accent-orange-strong: var(--color-orange-400); --color-color-icon-accent-orange-strongest: var(--color-orange-100); --color-color-icon-accent-red-subtlest: var(--color-red-700); --color-color-icon-accent-red-strong: var(--color-red-400); --color-color-icon-accent-red-strongest: var(--color-red-100); --color-color-icon-accent-pink-subtlest: var(--color-pink-700); --color-color-icon-accent-pink-strong: var(--color-pink-400); --color-color-icon-accent-pink-strongest: var(--color-pink-100); --color-color-shadow-inner-violet: var(--color-gray-900-a48); --color-color-shadow-outer-2xl-violet: var(--color-violet-900-a8); --color-color-shadow-outer-2xl-gray: var(--color-gray-900-a48); --color-color-shadow-outer-violet: var(--color-violet-900-a4); --color-color-shadow-outer-gray: var(--color-gray-900-a32); --color-color-gradient-accent-blue-strongest-stop-1: var(--color-blue-700); --color-color-illustration-blue: var(--color-gray-0); --color-color-illustration-gray: var(--color-gray-0); --color-color-surface-dim: var(--color-gray-900); --color-color-illustration-gradient-gray-subtler-stop-1: var( --color-gray-400 ); --color-color-illustration-gradient-violet-subtler-stop-1: var( --color-violet-400 ); --color-color-illustration-gradient-blue-subtler-stop-1: var( --color-blue-400 ); --color-color-illustration-gradient-teal-subtler-stop-1: var( --color-teal-400 ); --color-color-illustration-gradient-green-subtler-stop-1: var( --color-green-400 ); --color-color-illustration-gradient-yellow-subtler-stop-1: var( --color-yellow-400 ); --color-color-illustration-gradient-orange-subtler-stop-1: var( --color-orange-400 ); --color-color-illustration-gradient-red-subtler-stop-1: var( --color-red-400 ); --color-color-illustration-gradient-red-subtler-stop-2: var( --color-red-500 ); --color-color-illustration-gradient-red-subtle-stop-1: var(--color-red-500); --color-color-illustration-gradient-red-subtle-stop-2: var(--color-red-600); --color-color-illustration-gradient-red-default-stop-1: var( --color-red-600 ); --color-color-illustration-gradient-red-default-stop-2: var( --color-red-700 ); --color-color-illustration-gradient-red-strong-stop-1: var(--color-red-700); --color-color-illustration-gradient-red-strong-stop-2: var(--color-red-800); --color-color-illustration-gradient-red-stronger-stop-1: var( --color-red-800 ); --color-color-illustration-gradient-red-stronger-stop-2: var( --color-red-900 ); --color-color-illustration-gradient-pink-subtler-stop-1: var( --color-pink-400 ); --color-color-illustration-gradient-pink-subtler-stop-2: var( --color-pink-500 ); --color-color-illustration-gradient-pink-subtle-stop-1: var( --color-pink-500 ); --color-color-illustration-gradient-pink-subtle-stop-2: var( --color-pink-600 ); --color-color-illustration-gradient-pink-default-stop-1: var( --color-pink-600 ); --color-color-illustration-gradient-pink-default-stop-2: var( --color-pink-700 ); --color-color-illustration-gradient-pink-strong-stop-1: var( --color-pink-700 ); --color-color-illustration-gradient-pink-strong-stop-2: var( --color-pink-800 ); --color-color-illustration-gradient-pink-stronger-stop-1: var( --color-pink-800 ); --color-color-illustration-gradient-pink-stronger-stop-2: var( --color-pink-900 ); --color-color-illustration-gradient-orange-subtler-stop-2: var( --color-orange-500 ); --color-color-illustration-gradient-orange-subtle-stop-1: var( --color-orange-500 ); --color-color-illustration-gradient-orange-subtle-stop-2: var( --color-orange-600 ); --color-color-illustration-gradient-orange-default-stop-1: var( --color-orange-600 ); --color-color-illustration-gradient-orange-default-stop-2: var( --color-orange-700 ); --color-color-illustration-gradient-orange-strong-stop-1: var( --color-orange-700 ); --color-color-illustration-gradient-orange-strong-stop-2: var( --color-orange-800 ); --color-color-illustration-gradient-orange-stronger-stop-1: var( --color-orange-800 ); --color-color-illustration-gradient-orange-stronger-stop-2: var( --color-orange-900 ); --color-color-illustration-gradient-yellow-subtler-stop-2: var( --color-yellow-500 ); --color-color-illustration-gradient-yellow-subtle-stop-1: var( --color-yellow-500 ); --color-color-illustration-gradient-yellow-subtle-stop-2: var( --color-yellow-600 ); --color-color-illustration-gradient-yellow-default-stop-1: var( --color-yellow-600 ); --color-color-illustration-gradient-yellow-default-stop-2: var( --color-yellow-700 ); --color-color-illustration-gradient-yellow-strong-stop-1: var( --color-yellow-700 ); --color-color-illustration-gradient-yellow-strong-stop-2: var( --color-yellow-800 ); --color-color-illustration-gradient-yellow-stronger-stop-1: var( --color-yellow-800 ); --color-color-illustration-gradient-yellow-stronger-stop-2: var( --color-yellow-900 ); --color-color-illustration-gradient-green-subtler-stop-2: var( --color-green-500 ); --color-color-illustration-gradient-green-subtle-stop-1: var( --color-green-500 ); --color-color-illustration-gradient-green-subtle-stop-2: var( --color-green-600 ); --color-color-illustration-gradient-green-default-stop-1: var( --color-green-600 ); --color-color-illustration-gradient-green-default-stop-2: var( --color-green-700 ); --color-color-illustration-gradient-green-strong-stop-1: var( --color-green-700 ); --color-color-illustration-gradient-green-strong-stop-2: var( --color-green-800 ); --color-color-illustration-gradient-green-stronger-stop-1: var( --color-green-800 ); --color-color-illustration-gradient-green-stronger-stop-2: var( --color-green-900 ); --color-color-illustration-gradient-teal-subtler-stop-2: var( --color-teal-500 ); --color-color-illustration-gradient-teal-subtle-stop-1: var( --color-teal-500 ); --color-color-illustration-gradient-teal-subtle-stop-2: var( --color-teal-600 ); --color-color-illustration-gradient-teal-default-stop-1: var( --color-teal-600 ); --color-color-illustration-gradient-teal-default-stop-2: var( --color-teal-700 ); --color-color-illustration-gradient-teal-strong-stop-1: var( --color-teal-700 ); --color-color-illustration-gradient-teal-strong-stop-2: var( --color-teal-800 ); --color-color-illustration-gradient-teal-stronger-stop-1: var( --color-teal-800 ); --color-color-illustration-gradient-teal-stronger-stop-2: var( --color-teal-900 ); --color-color-illustration-gradient-blue-subtler-stop-2: var( --color-blue-500 ); --color-color-illustration-gradient-blue-subtle-stop-1: var( --color-blue-500 ); --color-color-illustration-gradient-blue-subtle-stop-2: var( --color-blue-600 ); --color-color-illustration-gradient-blue-default-stop-1: var( --color-blue-600 ); --color-color-illustration-gradient-blue-default-stop-2: var( --color-blue-700 ); --color-color-illustration-gradient-blue-strong-stop-1: var( --color-blue-700 ); --color-color-illustration-gradient-blue-strong-stop-2: var( --color-blue-800 ); --color-color-illustration-gradient-blue-stronger-stop-1: var( --color-blue-800 ); --color-color-illustration-gradient-blue-stronger-stop-2: var( --color-blue-900 ); --color-color-illustration-gradient-violet-subtler-stop-2: var( --color-violet-500 ); --color-color-illustration-gradient-violet-subtle-stop-1: var( --color-violet-500 ); --color-color-illustration-gradient-violet-subtle-stop-2: var( --color-violet-600 ); --color-color-illustration-gradient-violet-default-stop-1: var( --color-violet-600 ); --color-color-illustration-gradient-violet-default-stop-2: var( --color-violet-700 ); --color-color-illustration-gradient-violet-strong-stop-1: var( --color-violet-700 ); --color-color-illustration-gradient-violet-strong-stop-2: var( --color-violet-800 ); --color-color-illustration-gradient-violet-stronger-stop-1: var( --color-violet-800 ); --color-color-illustration-gradient-violet-stronger-stop-2: var( --color-violet-900 ); --color-color-illustration-gradient-gray-subtler-stop-2: var( --color-gray-500 ); --color-color-illustration-gradient-gray-subtle-stop-1: var( --color-gray-500 ); --color-color-illustration-gradient-gray-subtle-stop-2: var( --color-gray-600 ); --color-color-illustration-gradient-gray-default-stop-1: var( --color-gray-600 ); --color-color-illustration-gradient-gray-default-stop-2: var( --color-gray-700 ); --color-color-illustration-gradient-gray-strong-stop-1: var( --color-gray-700 ); --color-color-illustration-gradient-gray-strong-stop-2: var( --color-gray-800 ); --color-color-illustration-gradient-gray-stronger-stop-1: var( --color-gray-800 ); --color-color-illustration-gradient-gray-stronger-stop-2: var( --color-gray-900 ); --color-color-text-light-subtle: var(--color-gray-400); --color-color-text-accent-gray-subtlest: var(--color-gray-700); --color-color-text-accent-gray-strong: var(--color-gray-300); --color-color-text-accent-gray-strongest: var(--color-gray-100); --color-color-text-accent-violet-subtlest: var(--color-violet-700); --color-color-text-accent-violet-strong: var(--color-violet-300); --color-color-text-accent-violet-strongest: var(--color-violet-100); --color-color-text-accent-blue-subtlest: var(--color-blue-700); --color-color-text-accent-blue-strong: var(--color-blue-300); --color-color-text-accent-blue-strongest: var(--color-blue-100); --color-color-text-accent-teal-subtlest: var(--color-teal-700); --color-color-text-accent-teal-strong: var(--color-teal-300); --color-color-text-accent-teal-strongest: var(--color-teal-100); --color-color-text-accent-green-subtlest: var(--color-green-700); --color-color-text-accent-green-strong: var(--color-green-300); --color-color-text-accent-green-strongest: var(--color-green-100); --color-color-text-accent-yellow-subtlest: var(--color-yellow-700); --color-color-text-accent-yellow-strong: var(--color-yellow-300); --color-color-text-accent-yellow-strongest: var(--color-yellow-100); --color-color-text-accent-orange-subtlest: var(--color-orange-700); --color-color-text-accent-orange-strong: var(--color-orange-300); --color-color-text-accent-orange-strongest: var(--color-orange-100); --color-color-text-accent-red-subtlest: var(--color-red-700); --color-color-text-accent-red-strong: var(--color-red-300); --color-color-text-accent-red-strongest: var(--color-red-100); --color-color-text-accent-pink-subtlest: var(--color-pink-700); --color-color-text-accent-pink-strong: var(--color-pink-300); --color-color-text-accent-pink-strongest: var(--color-pink-100); --color-color-text-light-default: var(--color-gray-300); --color-color-text-light-strong: var(--color-gray-200); --color-color-text-light-stronger: var(--color-gray-0); --color-color-fade-bright: var(--color-gray-700-a0); --color-color-fade-default: var(--color-gray-800-a0); --color-color-fade-dim: var(--color-gray-900-a0); --color-color-brand-q-ctrl-color-gradient-stop-1: var(--color-white); --color-color-brand-q-ctrl-color-gradient-stop-2: var(--color-white); --color-color-brand-product-black-gradient-stop-1: var(--color-white); --color-color-brand-q-ctrl-color-gradient-stop-4: var(--color-white); --color-color-brand-product-black-gradient-stop-2: var(--color-white-a70); --color-color-brand-product-color-gradient-stop-1: var(--color-white); --color-color-brand-product-color-gradient-stop-2: var(--color-white-a70); --color-color-brand-q-ctrl-black: var(--color-white); --color-color-brand-text: var(--color-white); } .light { --color-color-surface-overlay: var(--color-white); --color-color-surface-bright: var(--color-white); --color-color-surface-default: var(--color-white); --color-color-background-info-subtlest: var(--color-blue-0); --color-color-background-info-subtler: var(--color-blue-100); --color-color-background-info-subtler-hover: var(--color-blue-0); --color-color-background-info-subtler-press: var(--color-blue-200); --color-color-background-info-strong: var(--color-blue-500); --color-color-background-info-strong-hover: var(--color-blue-400); --color-color-text-subtle: var(--color-gray-400); --color-color-background-info-strong-press: var(--color-blue-600); --color-color-background-success-subtlest: var(--color-green-0); --color-color-background-success-subtler: var(--color-green-100); --color-color-background-success-subtler-hover: var(--color-green-0); --color-color-background-success-subtler-press: var(--color-green-200); --color-color-background-success-strong: var(--color-green-500); --color-color-background-success-strong-hover: var(--color-green-400); --color-color-background-success-strong-press: var(--color-green-600); --color-color-background-warning-subtlest: var(--color-yellow-0); --color-color-background-warning-subtler: var(--color-yellow-100); --color-color-background-warning-subtler-hover: var(--color-yellow-0); --color-color-background-warning-subtler-press: var(--color-yellow-200); --color-color-background-warning-strong: var(--color-yellow-500); --color-color-background-warning-strong-hover: var(--color-yellow-400); --color-color-background-warning-strong-press: var(--color-yellow-600); --color-color-background-danger-subtlest: var(--color-red-0); --color-color-background-danger-subtler: var(--color-red-100); --color-color-background-danger-subtler-hover: var(--color-red-0); --color-color-background-danger-subtler-press: var(--color-red-200); --color-color-background-danger-strong: var(--color-red-500); --color-color-background-danger-strong-hover: var(--color-red-400); --color-color-background-danger-strong-press: var(--color-red-600); --color-color-background-interactive-subtler: var(--color-violet-100); --color-color-background-interactive-subtler-hover: var(--color-violet-0); --color-color-background-interactive-subtler-press: var(--color-violet-200); --color-color-background-interactive-strong: var(--color-violet-500); --color-color-background-interactive-strong-hover: var(--color-violet-400); --color-color-background-interactive-strong-press: var(--color-violet-600); --color-color-background-brand-default: var(--color-violet-500); --color-color-background-brand-default-hover: var(--color-violet-400); --color-color-background-brand-default-press: var(--color-violet-600); --color-color-background-overlay-default: var(--color-violet-900-a65); --color-color-background-inverse-default: var(--color-violet-800); --color-color-background-inverse-default-hover: var(--color-violet-700); --color-color-background-inverse-default-press: var(--color-violet-900); --color-color-background-light-default: var(--color-gray-0); --color-color-background-dark-default: var(--color-gray-800); --color-color-background-dark-default-hover: var(--color-gray-700); --color-color-background-dark-default-press: var(--color-gray-900); --color-color-background-light-default-hover: var(--color-white); --color-color-background-light-default-press: var(--color-gray-100); --color-color-background-accent-gray-subtlest: var(--color-gray-100); --color-color-background-accent-gray-subtlest-hover: var(--color-gray-0); --color-color-background-accent-gray-subtlest-press: var(--color-gray-200); --color-color-background-accent-gray-subtler: var(--color-gray-200); --color-color-background-accent-gray-subtler-hover: var(--color-gray-100); --color-color-background-accent-gray-subtler-press: var(--color-gray-300); --color-color-background-accent-gray-subtle: var(--color-gray-300); --color-color-background-accent-gray-subtle-hover: var(--color-gray-200); --color-color-background-accent-gray-subtle-press: var(--color-gray-400); --color-color-background-accent-gray-stronger: var(--color-gray-600); --color-color-background-accent-gray-stronger-hover: var(--color-gray-500); --color-color-background-accent-gray-stronger-press: var(--color-gray-700); --color-color-background-accent-violet-subtlest: var(--color-violet-100); --color-color-background-accent-violet-subtlest-hover: var( --color-violet-0 ); --color-color-background-accent-violet-subtlest-press: var( --color-violet-200 ); --color-color-background-accent-violet-subtler: var(--color-violet-200); --color-color-background-accent-violet-subtler-hover: var( --color-violet-100 ); --color-color-background-accent-violet-subtler-press: var( --color-violet-300 ); --color-color-background-accent-violet-subtle: var(--color-violet-300); --color-color-background-accent-violet-subtle-hover: var( --color-violet-200 ); --color-color-background-accent-violet-subtle-press: var( --color-violet-400 ); --color-color-background-accent-violet-stronger: var(--color-violet-600); --color-color-background-accent-violet-stronger-hover: var( --color-violet-500 ); --color-color-background-accent-violet-stronger-press: var( --color-violet-700 ); --color-color-background-accent-blue-subtlest: var(--color-blue-100); --color-color-background-accent-blue-subtlest-hover: var(--color-blue-0); --color-color-background-accent-blue-subtlest-press: var(--color-blue-200); --color-color-background-accent-blue-subtler: var(--color-blue-200); --color-color-background-accent-blue-subtler-hover: var(--color-blue-100); --color-color-background-accent-blue-subtler-press: var(--color-blue-300); --color-color-background-accent-blue-subtle: var(--color-blue-300); --color-color-background-accent-blue-subtle-hover: var(--color-blue-200); --color-color-background-accent-blue-subtle-press: var(--color-blue-400); --color-color-background-accent-blue-stronger: var(--color-blue-600); --color-color-background-accent-blue-stronger-hover: var(--color-blue-500); --color-color-background-accent-blue-stronger-press: var(--color-blue-700); --color-color-background-accent-teal-subtlest: var(--color-teal-100); --color-color-background-accent-teal-subtlest-hover: var(--color-teal-0); --color-color-background-accent-teal-subtlest-press: var(--color-teal-200); --color-color-background-accent-teal-subtler: var(--color-teal-200); --color-color-background-accent-teal-subtler-hover: var(--color-teal-100); --color-color-background-accent-teal-subtler-press: var(--color-teal-300); --color-color-background-accent-teal-subtle: var(--color-teal-300); --color-color-background-accent-teal-subtle-hover: var(--color-teal-200); --color-color-background-accent-teal-subtle-press: var(--color-teal-400); --color-color-background-accent-teal-stronger: var(--color-teal-600); --color-color-background-accent-teal-stronger-hover: var(--color-teal-500); --color-color-background-accent-teal-stronger-press: var(--color-teal-700); --color-color-background-accent-green-subtlest: var(--color-green-100); --color-color-background-accent-green-subtlest-hover: var(--color-green-0); --color-color-background-accent-green-subtlest-press: var( --color-green-200 ); --color-color-background-accent-green-subtler: var(--color-green-200); --color-color-background-accent-green-subtler-hover: var(--color-green-100); --color-color-background-accent-green-subtler-press: var(--color-green-300); --color-color-background-accent-green-subtle: var(--color-green-300); --color-color-background-accent-green-subtle-hover: var(--color-green-200); --color-color-background-accent-green-subtle-press: var(--color-green-400); --color-color-background-accent-green-stronger: var(--color-green-600); --color-color-background-accent-green-stronger-hover: var( --color-green-500 ); --color-color-background-accent-green-stronger-press: var( --color-green-700 ); --color-color-background-accent-yellow-subtlest: var(--color-yellow-100); --color-color-background-accent-yellow-subtlest-hover: var( --color-yellow-0 ); --color-color-background-accent-yellow-subtlest-press: var( --color-yellow-200 ); --color-color-background-accent-yellow-subtler: var(--color-yellow-200); --color-color-background-accent-yellow-subtler-hover: var( --color-yellow-100 ); --color-color-background-accent-yellow-subtler-press: var( --color-yellow-300 ); --color-color-background-accent-yellow-subtle: var(--color-yellow-300); --color-color-background-accent-yellow-subtle-hover: var( --color-yellow-200 ); --color-color-background-accent-yellow-subtle-press: var( --color-yellow-400 ); --color-color-background-accent-yellow-stronger: var(--color-yellow-600); --color-color-background-accent-yellow-stronger-hover: var( --color-yellow-500 ); --color-color-background-accent-yellow-stronger-press: var( --color-yellow-700 ); --color-color-background-accent-orange-subtlest: var(--color-orange-100); --color-color-background-accent-orange-subtlest-hover: var( --color-orange-0 ); --color-color-background-accent-orange-subtlest-press: var( --color-orange-200 ); --color-color-background-accent-orange-subtler: var(--color-orange-200); --color-color-background-accent-orange-subtler-hover: var( --color-orange-100 ); --color-color-background-accent-orange-subtler-press: var( --color-orange-300 ); --color-color-background-accent-orange-subtle: var(--color-orange-300); --color-color-background-accent-orange-subtle-hover: var( --color-orange-200 ); --color-color-background-accent-orange-subtle-press: var( --color-orange-400 ); --color-color-background-accent-orange-stronger: var(--color-orange-600); --color-color-background-accent-orange-stronger-hover: var( --color-orange-500 ); --color-color-background-accent-orange-stronger-press: var( --color-orange-700 ); --color-color-background-accent-red-subtlest: var(--color-red-100); --color-color-background-accent-red-subtlest-hover: var(--color-red-0); --color-color-background-accent-red-subtlest-press: var(--color-red-200); --color-color-background-accent-red-subtler: var(--color-red-200); --color-color-background-accent-red-subtler-hover: var(--color-red-100); --color-color-background-accent-red-subtler-press: var(--color-red-300); --color-color-background-accent-red-subtle: var(--color-red-300); --color-color-background-accent-red-subtle-hover: var(--color-red-200); --color-color-background-accent-red-subtle-press: var(--color-red-400); --color-color-background-accent-red-stronger: var(--color-red-600); --color-color-background-accent-red-stronger-hover: var(--color-red-500); --color-color-background-accent-red-stronger-press: var(--color-red-700); --color-color-background-accent-pink-subtlest: var(--color-pink-100); --color-color-background-accent-pink-subtlest-hover: var(--color-pink-0); --color-color-background-accent-pink-subtlest-press: var(--color-pink-200); --color-color-background-accent-pink-subtler: var(--color-pink-200); --color-color-background-accent-pink-subtler-hover: var(--color-pink-100); --color-color-background-accent-pink-subtler-press: var(--color-pink-300); --color-color-background-accent-pink-subtle: var(--color-pink-300); --color-color-background-accent-pink-subtle-hover: var(--color-pink-200); --color-color-background-accent-pink-subtle-press: var(--color-pink-400); --color-color-background-accent-pink-stronger: var(--color-pink-600); --color-color-background-accent-pink-stronger-hover: var(--color-pink-500); --color-color-background-accent-pink-stronger-press: var(--color-pink-700); --color-color-background-accent-gradient-gray-default-stop-1: var( --color-gray-300 ); --color-color-background-accent-gradient-gray-default-stop-2: var( --color-gray-400 ); --color-color-background-accent-gradient-gray-strong-stop-1: var( --color-gray-400 ); --color-color-background-accent-gradient-gray-strong-stop-2: var( --color-gray-500 ); --color-color-background-accent-gradient-gray-stronger-stop-1: var( --color-gray-500 ); --color-color-background-accent-gradient-gray-stronger-stop-2: var( --color-gray-600 ); --color-color-background-accent-gradient-violet-default-stop-1: var( --color-violet-300 ); --color-color-background-accent-gradient-violet-default-stop-2: var( --color-violet-400 ); --color-color-background-accent-gradient-violet-strong-stop-1: var( --color-violet-400 ); --color-color-background-accent-gradient-violet-strong-stop-2: var( --color-violet-500 ); --color-color-background-accent-gradient-violet-stronger-stop-1: var( --color-violet-500 ); --color-color-background-accent-gradient-violet-stronger-stop-2: var( --color-violet-600 ); --color-color-background-accent-gradient-blue-default-stop-1: var( --color-blue-300 ); --color-color-background-accent-gradient-blue-default-stop-2: var( --color-blue-400 ); --color-color-background-accent-gradient-blue-strong-stop-1: var( --color-blue-400 ); --color-color-background-accent-gradient-blue-strong-stop-2: var( --color-blue-500 ); --color-color-background-accent-gradient-blue-stronger-stop-1: var( --color-blue-500 ); --color-color-background-accent-gradient-blue-stronger-stop-2: var( --color-blue-600 ); --color-color-background-accent-gradient-teal-default-stop-1: var( --color-teal-300 ); --color-color-background-accent-gradient-teal-default-stop-2: var( --color-teal-400 ); --color-color-background-accent-gradient-teal-strong-stop-1: var( --color-teal-400 ); --color-color-background-accent-gradient-teal-strong-stop-2: var( --color-teal-500 ); --color-color-background-accent-gradient-teal-stronger-stop-1: var( --color-teal-500 ); --color-color-background-accent-gradient-teal-stronger-stop-2: var( --color-teal-600 ); --color-color-background-accent-gradient-green-default-stop-1: var( --color-green-300 ); --color-color-background-accent-gradient-green-default-stop-2: var( --color-green-400 ); --color-color-background-accent-gradient-green-strong-stop-1: var( --color-green-400 ); --color-color-background-accent-gradient-green-strong-stop-2: var( --color-green-500 ); --color-color-background-accent-gradient-green-stronger-stop-1: var( --color-green-500 ); --color-color-background-accent-gradient-green-stronger-stop-2: var( --color-green-600 ); --color-color-background-accent-gradient-yellow-default-stop-1: var( --color-yellow-300 ); --color-color-background-accent-gradient-yellow-default-stop-2: var( --color-yellow-400 ); --color-color-background-accent-gradient-yellow-strong-stop-1: var( --color-yellow-400 ); --color-color-background-accent-gradient-yellow-strong-stop-2: var( --color-yellow-500 ); --color-color-background-accent-gradient-yellow-stronger-stop-1: var( --color-yellow-500 ); --color-color-background-accent-gradient-yellow-stronger-stop-2: var( --color-yellow-600 ); --color-color-background-accent-gradient-orange-default-stop-1: var( --color-orange-300 ); --color-color-background-accent-gradient-orange-default-stop-2: var( --color-orange-400 ); --color-color-background-accent-gradient-orange-strong-stop-1: var( --color-orange-400 ); --color-color-background-accent-gradient-orange-strong-stop-2: var( --color-orange-500 ); --color-color-background-accent-gradient-orange-stronger-stop-1: var( --color-orange-500 ); --color-color-background-accent-gradient-orange-stronger-stop-2: var( --color-orange-600 ); --color-color-background-accent-gradient-red-default-stop-1: var( --color-red-300 ); --color-color-background-accent-gradient-red-default-stop-2: var( --color-red-400 ); --color-color-background-accent-gradient-red-strong-stop-1: var( --color-red-400 ); --color-color-background-accent-gradient-red-strong-stop-2: var( --color-red-500 ); --color-color-background-accent-gradient-red-stronger-stop-1: var( --color-red-500 ); --color-color-background-accent-gradient-red-stronger-stop-2: var( --color-red-600 ); --color-color-background-accent-gradient-pink-default-stop-1: var( --color-pink-300 ); --color-color-background-accent-gradient-pink-default-stop-2: var( --color-pink-400 ); --color-color-background-accent-gradient-pink-strong-stop-1: var( --color-pink-400 ); --color-color-background-accent-gradient-pink-strong-stop-2: var( --color-pink-500 ); --color-color-background-accent-gradient-pink-stronger-stop-1: var( --color-pink-500 ); --color-color-background-accent-gradient-pink-stronger-stop-2: var( --color-pink-600 ); --color-color-text-default: var(--color-gray-500); --color-color-link-subtle: var(--color-gray-400); --color-color-link-default: var(--color-violet-500); --color-color-link-default-active: var(--color-violet-500); --color-color-link-hover: var(--color-violet-400); --color-color-link-press: var(--color-violet-600); --color-color-text-strong: var(--color-gray-600); --color-color-text-stronger: var(--color-gray-800); --color-color-text-info: var(--color-blue-600); --color-color-text-success: var(--color-green-600); --color-color-text-warning: var(--color-yellow-600); --color-color-text-danger: var(--color-red-500); --color-color-text-interactive: var(--color-violet-500); --color-color-text-brand: var(--color-violet-500); --color-color-text-light: var(--color-gray-0); --color-color-text-inverse: var(--color-violet-800); --color-color-text-on-inverse: var(--color-gray-0); --color-color-text-dark: var(--color-gray-700); --color-color-border-subtler: var(--color-gray-200); --color-color-border-subtle: var(--color-gray-300); --color-color-border-strong: var(--color-gray-500); --color-color-border-stronger: var(--color-gray-600); --color-color-border-info: var(--color-blue-500); --color-color-border-success: var(--color-green-500); --color-color-border-warning: var(--color-yellow-500); --color-color-border-danger: var(--color-red-500); --color-color-border-interactive: var(--color-violet-500); --color-color-border-interactive-hover: var(--color-violet-400); --color-color-border-interactive-press: var(--color-violet-600); --color-color-border-accent-gray-default: var(--color-gray-400); --color-color-border-focus: var(--color-violet-500-a35); --color-color-border-inverse: var(--color-violet-800); --color-color-border-light-subtler: var(--color-gray-600); --color-color-border-light-strongest: var(--color-gray-0); --color-color-border-accent-gray-stronger: var(--color-gray-600); --color-color-border-accent-violet-default: var(--color-violet-400); --color-color-border-accent-violet-stronger: var(--color-violet-600); --color-color-border-accent-blue-default: var(--color-blue-400); --color-color-border-accent-blue-stronger: var(--color-blue-600); --color-color-border-accent-teal-default: var(--color-teal-400); --color-color-border-accent-teal-stronger: var(--color-teal-600); --color-color-border-accent-green-default: var(--color-green-400); --color-color-border-accent-green-stronger: var(--color-green-600); --color-color-border-accent-yellow-default: var(--color-yellow-400); --color-color-border-accent-orange-default: var(--color-orange-400); --color-color-border-accent-yellow-stronger: var(--color-yellow-600); --color-color-border-accent-red-default: var(--color-red-400); --color-color-border-accent-orange-stronger: var(--color-orange-600); --color-color-border-accent-red-stronger: var(--color-red-600); --color-color-border-accent-pink-default: var(--color-pink-400); --color-color-border-accent-pink-stronger: var(--color-pink-600); --color-color-background: var(--color-gray-100); --color-color-background-strong: var(--color-gray-500); --color-color-icon-subtle: var(--color-gray-400); --color-color-icon-default: var(--color-gray-500); --color-color-icon-light-subtle: var(--color-gray-400); --color-color-icon-light-default: var(--color-gray-300); --color-color-icon-light-strong: var(--color-gray-200); --color-color-icon-light-stronger: var(--color-gray-0); --color-color-icon-strong: var(--color-gray-600); --color-color-icon-info: var(--color-blue-500); --color-color-icon-success: var(--color-green-500); --color-color-icon-warning: var(--color-yellow-500); --color-color-icon-danger: var(--color-red-500); --color-color-icon-interactive: var(--color-violet-500); --color-color-icon-brand: var(--color-violet-500); --color-color-icon-light: var(--color-gray-0); --color-color-icon-inverse: var(--color-violet-800); --color-color-icon-on-inverse: var(--color-gray-0); --color-color-icon-dark: var(--color-gray-700); --color-color-icon-accent-gray-subtlest: var(--color-gray-0); --color-color-icon-accent-gray-strong: var(--color-gray-500); --color-color-icon-accent-gray-strongest: var(--color-gray-700); --color-color-icon-accent-violet-subtlest: var(--color-violet-0); --color-color-icon-accent-violet-strong: var(--color-violet-500); --color-color-icon-accent-violet-strongest: var(--color-violet-700); --color-color-icon-accent-blue-subtlest: var(--color-blue-0); --color-color-icon-accent-blue-strong: var(--color-blue-500); --color-color-icon-accent-blue-strongest: var(--color-blue-700); --color-color-icon-accent-teal-subtlest: var(--color-teal-0); --color-color-icon-accent-teal-strong: var(--color-teal-500); --color-color-icon-accent-teal-strongest: var(--color-teal-700); --color-color-icon-accent-green-subtlest: var(--color-green-0); --color-color-icon-accent-green-strong: var(--color-green-500); --color-color-icon-accent-green-strongest: var(--color-green-700); --color-color-icon-accent-yellow-subtlest: var(--color-yellow-0); --color-color-icon-accent-yellow-strong: var(--color-yellow-500); --color-color-icon-accent-yellow-strongest: var(--color-yellow-700); --color-color-icon-accent-orange-subtlest: var(--color-orange-0); --color-color-icon-accent-orange-strong: var(--color-orange-500); --color-color-icon-accent-orange-strongest: var(--color-orange-700); --color-color-icon-accent-red-subtlest: var(--color-red-0); --color-color-icon-accent-red-strong: var(--color-red-500); --color-color-icon-accent-red-strongest: var(--color-red-700); --color-color-icon-accent-pink-subtlest: var(--color-pink-0); --color-color-icon-accent-pink-strong: var(--color-pink-500); --color-color-icon-accent-pink-strongest: var(--color-pink-700); --color-color-shadow-inner-violet: var(--color-violet-900-a32); --color-color-shadow-outer-2xl-violet: var(--color-violet-900-a8); --color-color-shadow-outer-2xl-gray: var(--color-gray-500-a24); --color-color-shadow-outer-violet: var(--color-violet-900-a4); --color-color-shadow-outer-gray: var(--color-gray-500-a16); --color-color-gradient-accent-blue-strongest-stop-1: var(--color-blue-600); --color-color-illustration-blue: var(--color-illustration-blue); --color-color-illustration-gray: var(--color-illustration-gray); --color-color-surface-dim: var(--color-gray-0); --color-color-illustration-gradient-gray-subtler-stop-1: var( --color-gray-100 ); --color-color-illustration-gradient-violet-subtler-stop-1: var( --color-violet-100 ); --color-color-illustration-gradient-blue-subtler-stop-1: var( --color-blue-100 ); --color-color-illustration-gradient-teal-subtler-stop-1: var( --color-teal-100 ); --color-color-illustration-gradient-green-subtler-stop-1: var( --color-green-100 ); --color-color-illustration-gradient-yellow-subtler-stop-1: var( --color-yellow-100 ); --color-color-illustration-gradient-orange-subtler-stop-1: var( --color-orange-100 ); --color-color-illustration-gradient-red-subtler-stop-1: var( --color-red-100 ); --color-color-illustration-gradient-red-subtler-stop-2: var( --color-red-200 ); --color-color-illustration-gradient-red-subtle-stop-1: var(--color-red-200); --color-color-illustration-gradient-red-subtle-stop-2: var(--color-red-300); --color-color-illustration-gradient-red-default-stop-1: var( --color-red-300 ); --color-color-illustration-gradient-red-default-stop-2: var( --color-red-400 ); --color-color-illustration-gradient-red-strong-stop-1: var(--color-red-400); --color-color-illustration-gradient-red-strong-stop-2: var(--color-red-500); --color-color-illustration-gradient-red-stronger-stop-1: var( --color-red-500 ); --color-color-illustration-gradient-red-stronger-stop-2: var( --color-red-600 ); --color-color-illustration-gradient-pink-subtler-stop-1: var( --color-pink-100 ); --color-color-illustration-gradient-pink-subtler-stop-2: var( --color-pink-200 ); --color-color-illustration-gradient-pink-subtle-stop-1: var( --color-pink-200 ); --color-color-illustration-gradient-pink-subtle-stop-2: var( --color-pink-300 ); --color-color-illustration-gradient-pink-default-stop-1: var( --color-pink-300 ); --color-color-illustration-gradient-pink-default-stop-2: var( --color-pink-400 ); --color-color-illustration-gradient-pink-strong-stop-1: var( --color-pink-400 ); --color-color-illustration-gradient-pink-strong-stop-2: var( --color-pink-500 ); --color-color-illustration-gradient-pink-stronger-stop-1: var( --color-pink-500 ); --color-color-illustration-gradient-pink-stronger-stop-2: var( --color-pink-600 ); --color-color-illustration-gradient-orange-subtler-stop-2: var( --color-orange-200 ); --color-color-illustration-gradient-orange-subtle-stop-1: var( --color-orange-200 ); --color-color-illustration-gradient-orange-subtle-stop-2: var( --color-orange-300 ); --color-color-illustration-gradient-orange-default-stop-1: var( --color-orange-300 ); --color-color-illustration-gradient-orange-default-stop-2: var( --color-orange-400 ); --color-color-illustration-gradient-orange-strong-stop-1: var( --color-orange-400 ); --color-color-illustration-gradient-orange-strong-stop-2: var( --color-orange-500 ); --color-color-illustration-gradient-orange-stronger-stop-1: var( --color-orange-500 ); --color-color-illustration-gradient-orange-stronger-stop-2: var( --color-orange-600 ); --color-color-illustration-gradient-yellow-subtler-stop-2: var( --color-yellow-200 ); --color-color-illustration-gradient-yellow-subtle-stop-1: var( --color-yellow-200 ); --color-color-illustration-gradient-yellow-subtle-stop-2: var( --color-yellow-300 ); --color-color-illustration-gradient-yellow-default-stop-1: var( --color-yellow-300 ); --color-color-illustration-gradient-yellow-default-stop-2: var( --color-yellow-400 ); --color-color-illustration-gradient-yellow-strong-stop-1: var( --color-yellow-400 ); --color-color-illustration-gradient-yellow-strong-stop-2: var( --color-yellow-500 ); --color-color-illustration-gradient-yellow-stronger-stop-1: var( --color-yellow-500 ); --color-color-illustration-gradient-yellow-stronger-stop-2: var( --color-yellow-600 ); --color-color-illustration-gradient-green-subtler-stop-2: var( --color-green-200 ); --color-color-illustration-gradient-green-subtle-stop-1: var( --color-green-200 ); --color-color-illustration-gradient-green-subtle-stop-2: var( --color-green-300 ); --color-color-illustration-gradient-green-default-stop-1: var( --color-green-300 ); --color-color-illustration-gradient-green-default-stop-2: var( --color-green-400 ); --color-color-illustration-gradient-green-strong-stop-1: var( --color-green-400 ); --color-color-illustration-gradient-green-strong-stop-2: var( --color-green-500 ); --color-color-illustration-gradient-green-stronger-stop-1: var( --color-green-500 ); --color-color-illustration-gradient-green-stronger-stop-2: var( --color-green-600 ); --color-color-illustration-gradient-teal-subtler-stop-2: var( --color-teal-200 ); --color-color-illustration-gradient-teal-subtle-stop-1: var( --color-teal-200 ); --color-color-illustration-gradient-teal-subtle-stop-2: var( --color-teal-300 ); --color-color-illustration-gradient-teal-default-stop-1: var( --color-teal-300 ); --color-color-illustration-gradient-teal-default-stop-2: var( --color-teal-400 ); --color-color-illustration-gradient-teal-strong-stop-1: var( --color-teal-400 ); --color-color-illustration-gradient-teal-strong-stop-2: var( --color-teal-500 ); --color-color-illustration-gradient-teal-stronger-stop-1: var( --color-teal-500 ); --color-color-illustration-gradient-teal-stronger-stop-2: var( --color-teal-600 ); --color-color-illustration-gradient-blue-subtler-stop-2: var( --color-blue-200 ); --color-color-illustration-gradient-blue-subtle-stop-1: var( --color-blue-200 ); --color-color-illustration-gradient-blue-subtle-stop-2: var( --color-blue-300 ); --color-color-illustration-gradient-blue-default-stop-1: var( --color-blue-300 ); --color-color-illustration-gradient-blue-default-stop-2: var( --color-blue-400 ); --color-color-illustration-gradient-blue-strong-stop-1: var( --color-blue-400 ); --color-color-illustration-gradient-blue-strong-stop-2: var( --color-blue-500 ); --color-color-illustration-gradient-blue-stronger-stop-1: var( --color-blue-500 ); --color-color-illustration-gradient-blue-stronger-stop-2: var( --color-blue-600 ); --color-color-illustration-gradient-violet-subtler-stop-2: var( --color-violet-200 ); --color-color-illustration-gradient-violet-subtle-stop-1: var( --color-violet-200 ); --color-color-illustration-gradient-violet-subtle-stop-2: var( --color-violet-300 ); --color-color-illustration-gradient-violet-default-stop-1: var( --color-violet-300 ); --color-color-illustration-gradient-violet-default-stop-2: var( --color-violet-400 ); --color-color-illustration-gradient-violet-strong-stop-1: var( --color-violet-400 ); --color-color-illustration-gradient-violet-strong-stop-2: var( --color-violet-500 ); --color-color-illustration-gradient-violet-stronger-stop-1: var( --color-violet-500 ); --color-color-illustration-gradient-violet-stronger-stop-2: var( --color-violet-600 ); --color-color-illustration-gradient-gray-subtler-stop-2: var( --color-gray-200 ); --color-color-illustration-gradient-gray-subtle-stop-1: var( --color-gray-200 ); --color-color-illustration-gradient-gray-subtle-stop-2: var( --color-gray-300 ); --color-color-illustration-gradient-gray-default-stop-1: var( --color-gray-300 ); --color-color-illustration-gradient-gray-default-stop-2: var( --color-gray-400 ); --color-color-illustration-gradient-gray-strong-stop-1: var( --color-gray-400 ); --color-color-illustration-gradient-gray-strong-stop-2: var( --color-gray-500 ); --color-color-illustration-gradient-gray-stronger-stop-1: var( --color-gray-500 ); --color-color-illustration-gradient-gray-stronger-stop-2: var( --color-gray-600 ); --color-color-text-light-subtle: var(--color-gray-400); --color-color-text-accent-gray-subtlest: var(--color-gray-0); --color-color-text-accent-gray-strong: var(--color-gray-500); --color-color-text-accent-gray-strongest: var(--color-gray-700); --color-color-text-accent-violet-subtlest: var(--color-violet-0); --color-color-text-accent-violet-strong: var(--color-violet-500); --color-color-text-accent-violet-strongest: var(--color-violet-700); --color-color-text-accent-blue-subtlest: var(--color-blue-0); --color-color-text-accent-blue-strong: var(--color-blue-500); --color-color-text-accent-blue-strongest: var(--color-blue-700); --color-color-text-accent-teal-subtlest: var(--color-teal-0); --color-color-text-accent-teal-strong: var(--color-teal-500); --color-color-text-accent-teal-strongest: var(--color-teal-700); --color-color-text-accent-green-subtlest: var(--color-green-0); --color-color-text-accent-green-strong: var(--color-green-500); --color-color-text-accent-green-strongest: var(--color-green-700); --color-color-text-accent-yellow-subtlest: var(--color-yellow-0); --color-color-text-accent-yellow-strong: var(--color-yellow-500); --color-color-text-accent-yellow-strongest: var(--color-yellow-700); --color-color-text-accent-orange-subtlest: var(--color-orange-0); --color-color-text-accent-orange-strong: var(--color-orange-500); --color-color-text-accent-orange-strongest: var(--color-orange-700); --color-color-text-accent-red-subtlest: var(--color-red-0); --color-color-text-accent-red-strong: var(--color-red-500); --color-color-text-accent-red-strongest: var(--color-red-700); --color-color-text-accent-pink-subtlest: var(--color-pink-0); --color-color-text-accent-pink-strong: var(--color-pink-500); --color-color-text-accent-pink-strongest: var(--color-pink-700); --color-color-text-light-default: var(--color-gray-300); --color-color-text-light-strong: var(--color-gray-200); --color-color-text-light-stronger: var(--color-gray-0); --color-color-fade-bright: var(--color-white-a0); --color-color-fade-default: var(--color-white-a0); --color-color-fade-dim: var(--color-gray-0-a0); --color-color-brand-q-ctrl-color-gradient-stop-1: var( --color-brand-violet-dark ); --color-color-brand-q-ctrl-color-gradient-stop-2: var( --color-brand-violet-default ); --color-color-brand-product-black-gradient-stop-1: var(--color-brand-black); --color-color-brand-q-ctrl-color-gradient-stop-4: var( --color-brand-magenta ); --color-color-brand-product-black-gradient-stop-2: var( --color-brand-black-a70 ); --color-color-brand-product-color-gradient-stop-1: var( --color-brand-violet-light ); --color-color-brand-product-color-gradient-stop-2: var( --color-brand-violet-default ); --color-color-brand-q-ctrl-black: var(--color-brand-black); --color-color-brand-text: var(--color-brand-black); } }