// 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/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "sass:color";

$mint-150: #7efff5;
$mint-250: #00d1b8;
$mint-700: #426158;
$mint-150-60: #7efff599;
$mint-250-10: #00d1b81a;
$mint-250-70: #00d1b8b3;
$green-200: #a7e8d9;
$green-500: #2d9f8f;
$green-950: #0a2927;
$orange-200: #fedeac;
$orange-500: #fe9c07;
$orange-950: #3d2501;
$red-200: #ffcada;
$red-400: #c80857;
$red-500: #ff3277;
$red-950: #500124;
$pink-400: #ff6fe0;
$purple-200: #e1d2f5;
$purple-400: #bb97d8;
$purple-500: #a977d1;
$purple-600: #8c33eb;
$purple-700: #6911d4;
$purple-600-10: #8c33eb1a;
$purple-600-70: #8c33ebb3;
$purple-700-60: #6911d499;
$aqua-200: #ddf7ff;
$aqua-400: #77e1f3;
$aqua-600: #59acbb;
$aqua-800: #1d4464;
$violet-300: #a7a9ff;
$violet-600: #6c6dad;
$violet-700: #484c74;
$violet-800: #272941;
$blue-200: #bae3fd;
$blue-500: #0e9be9;
$blue-950: #082c49;
$cobalt-700: #1345aa;
$black: #000;
$gray-950: #18181a;
$gray-950-60: #18181a99;
$gray-950-90: #18181ae6;
$gray-900: #212426;
$gray-800: #2e3434;
$gray-200: #e8eaee;
$gray-100: #eef0f2;
$gray-50: #f3f4f6;
$white: #fff;
$white-60: #fff9;
$white-90: #ffffffe6;
$blue-teal-700: #495e74;
$grayish-blue-500: #8f9da3;
$grayish-red: #bfbfbf;

:global(.light) {
  --color-accent-primary: #{$purple-700};
  --color-accent-primary-muted: #{$purple-200};
  --color-accent-secondary: #{$cobalt-700};
  --color-accent-tertiary: #{$purple-600};
  --color-accent-quaternary: #{$pink-400};
  --color-accent-overlay: #{$purple-700-60};
  --color-accent-select: #{$purple-600-10};
  --color-accent-background-select: #{$purple-600-70};
  --color-accent-action: #{$purple-400};
  --color-accent-action-hover: #{$purple-500};
  --color-accent-off: #{$gray-50};
  --color-accent-success: #{$green-500};
  --color-background-success: #{$green-200};
  --color-accent-warning: #{$orange-500};
  --color-background-warning: #{$orange-200};
  --color-accent-error: #{$red-400};
  --color-background-error: #{$red-200};
  --color-foreground-error: #{$red-500};
  --color-accent-info: #{$blue-500};
  --color-background-info: #{$blue-200};
  --color-background-default: #{$white};
  --color-accent-default: #{$gray-100};
  --color-icon-default: #{$blue-teal-700};
  --color-background-disabled: #{$gray-200};
  --color-background-primary: #{$white};
  --color-background-secondary: #{$gray-200};
  --color-background-tertiary: #{$gray-50};
  --color-background-quaternary: #{$gray-100};
  --color-foreground-primary: #{$black};
  --color-foreground-secondary: #{$blue-teal-700};
  --color-static-white: #{$white};
  --color-static-black: #{$black};
  --color-shadow-dark: #{color.change($gray-200, $alpha: 0.6)};
  --color-shadow-light: #{color.change($black, $alpha: 0.3)};
  --color-overlay-default: #{$white-60};
  --color-overlay-onboarding: #{$white-90};
  --color-canvas: #{$grayish-red};
  --color-token-background: #{$aqua-200};
  --color-token-border: #{$aqua-400};
  --color-token-accent: #{$aqua-600};
  --color-token-foreground: #{$aqua-800};
  --color-badge-premium: #{$orange-500};
}

:global(.default) {
  --color-accent-primary: #{$mint-150};
  --color-accent-primary-muted: #{$mint-700};
  --color-accent-secondary: #{$purple-400};
  --color-accent-tertiary: #{$mint-250};
  --color-accent-quaternary: #{$pink-400};
  --color-accent-overlay: #{$mint-150-60};
  --color-accent-select: #{$mint-250-10};
  --color-accent-background-select: #{$mint-250-70};
  --color-accent-action: #{$purple-400};
  --color-accent-action-hover: #{$purple-500};
  --color-accent-off: #{$gray-50};
  --color-accent-success: #{$green-500};
  --color-background-success: #{$green-950};
  --color-accent-warning: #{$orange-500};
  --color-background-warning: #{$orange-950};
  --color-accent-error: #{$red-400};
  --color-background-error: #{$red-950};
  --color-foreground-error: #{$red-500};
  --color-accent-info: #{$blue-500};
  --color-background-info: #{$blue-950};
  --color-background-default: #{$gray-950};
  --color-accent-default: #{$gray-800};
  --color-icon-default: #{$grayish-blue-500};
  --color-background-disabled: #{$gray-800};
  --color-background-primary: #{$gray-950};
  --color-background-secondary: #{$black};
  --color-background-tertiary: #{$gray-900};
  --color-background-quaternary: #{$gray-800};
  --color-foreground-primary: #{$white};
  --color-foreground-secondary: #{$grayish-blue-500};
  --color-static-white: #{$white};
  --color-static-black: #{$black};
  --color-shadow-dark: #{color.change($black, $alpha: 0.6)};
  --color-shadow-light: #{color.change($black, $alpha: 0.3)};
  --color-overlay-default: #{$gray-950-60};
  --color-overlay-onboarding: #{$gray-950-90};
  --color-canvas: #{$grayish-red};
  --color-token-background: #{$violet-800};
  --color-token-border: #{$violet-700};
  --color-token-accent: #{$violet-600};
  --color-token-foreground: #{$violet-300};
  --color-badge-premium: #{$orange-200};
}