$black: #14151a;
$white: #ffffff;

$color-palette-primary-100: var(--color-palette-primary-100);
$color-palette-primary-200: var(--color-palette-primary-200);
$color-palette-primary-300: var(--color-palette-primary-300);
$color-palette-primary-400: var(--color-palette-primary-400);
$color-palette-primary-500: var(--color-palette-primary-500);
$color-palette-primary-600: var(--color-palette-primary-600);
$color-palette-primary-700: var(--color-palette-primary-700);
$color-palette-primary-800: var(--color-palette-primary-800);
$color-palette-primary-900: var(--color-palette-primary-900);

$color-palette-primary-op-10: var(--color-palette-primary-op-10);
$color-palette-primary-op-20: var(--color-palette-primary-op-20);
$color-palette-primary-op-30: var(--color-palette-primary-op-30);
$color-palette-primary-op-40: var(--color-palette-primary-op-40);
$color-palette-primary-op-50: var(--color-palette-primary-op-50);
$color-palette-primary-op-60: var(--color-palette-primary-op-60);
$color-palette-primary-op-70: var(--color-palette-primary-op-70);
$color-palette-primary-op-80: var(--color-palette-primary-op-80);
$color-palette-primary-op-90: var(--color-palette-primary-op-90);

$color-palette-primary-shade: $color-palette-primary-600;
$color-palette-primary: $color-palette-primary-500;
$color-palette-primary-tint: $color-palette-primary-100;

$color-palette-secondary-100: var(--color-palette-secondary-100);
$color-palette-secondary-200: var(--color-palette-secondary-200);
$color-palette-secondary-300: var(--color-palette-secondary-300);
$color-palette-secondary-400: var(--color-palette-secondary-400);
$color-palette-secondary-500: var(--color-palette-secondary-500);
$color-palette-secondary-600: var(--color-palette-secondary-600);
$color-palette-secondary-700: var(--color-palette-secondary-700);
$color-palette-secondary-800: var(--color-palette-secondary-800);
$color-palette-secondary-900: var(--color-palette-secondary-900);

$color-palette-secondary-op-10: var(--color-palette-secondary-op-10);
$color-palette-secondary-op-20: var(--color-palette-secondary-op-20);
$color-palette-secondary-op-30: var(--color-palette-secondary-op-30);
$color-palette-secondary-op-40: var(--color-palette-secondary-op-40);
$color-palette-secondary-op-50: var(--color-palette-secondary-op-50);
$color-palette-secondary-op-60: var(--color-palette-secondary-op-60);
$color-palette-secondary-op-70: var(--color-palette-secondary-op-70);
$color-palette-secondary-op-80: var(--color-palette-secondary-op-80);
$color-palette-secondary-op-90: var(--color-palette-secondary-op-90);

$color-palette-secondary-shade: $color-palette-secondary-600;
$color-palette-secondary: $color-palette-secondary-500;
$color-palette-secondary-tint: $color-palette-secondary-200;

$color-palette-black-op-10: var(--color-palette-black-op-10);
$color-palette-black-op-20: var(--color-palette-black-op-20);
$color-palette-black-op-30: var(--color-palette-black-op-30);
$color-palette-black-op-40: var(--color-palette-black-op-40);
$color-palette-black-op-50: var(--color-palette-black-op-50);
$color-palette-black-op-60: var(--color-palette-black-op-60);
$color-palette-black-op-70: var(--color-palette-black-op-70);
$color-palette-black-op-80: var(--color-palette-black-op-80);
$color-palette-black-op-90: var(--color-palette-black-op-90);

$color-palette-white-op-10: var(--color-palette-white-op-10);
$color-palette-white-op-20: var(--color-palette-white-op-20);
$color-palette-white-op-30: var(--color-palette-white-op-30);
$color-palette-white-op-40: var(--color-palette-white-op-40);
$color-palette-white-op-50: var(--color-palette-white-op-50);
$color-palette-white-op-60: var(--color-palette-white-op-60);
$color-palette-white-op-70: var(--color-palette-white-op-70);
$color-palette-white-op-80: var(--color-palette-white-op-80);
$color-palette-white-op-90: var(--color-palette-white-op-90);

// Gray sass variables
$color-palette-gray-100: var(--gray-100);
$color-palette-gray-200: var(--gray-200);
$color-palette-gray-300: var(--gray-300);
$color-palette-gray-400: var(--gray-400);
$color-palette-gray-500: var(--gray-500);
$color-palette-gray-600: var(--gray-600);
$color-palette-gray-700: var(--gray-700);
$color-palette-gray-800: var(--gray-800);
$color-palette-gray-900: var(--gray-900);

// Surface
$color-palette-surface-500: var(--surface-500);
$color-palette-surface-900: var(--surface-900);

$color-palette-gray-shade: $color-palette-gray-300;
$color-palette-gray: $color-palette-gray-500;
$color-palette-gray-tint: rgba($color-palette-gray, 0.1);

$color-palette-gray-op-08: rgba($color-palette-gray, 0.8);
$color-palette-gray-op-10: rgba($color-palette-gray, 0.1);
$color-palette-gray-op-15: rgba($color-palette-gray, 0.15);
$color-palette-gray-op-20: rgba($color-palette-gray, 0.2);
$color-palette-gray-op-30: rgba($color-palette-gray, 0.3);
$color-palette-gray-op-40: rgba($color-palette-gray, 0.4);
$color-palette-gray-op-50: rgba($color-palette-gray, 0.5);
$color-palette-gray-op-60: rgba($color-palette-gray, 0.6);
$color-palette-gray-op-70: rgba($color-palette-gray, 0.7);
$color-palette-gray-op-80: rgba($color-palette-gray, 0.8);
$color-palette-gray-op-90: rgba($color-palette-gray, 0.9);

$color-accessible-text-gray: $color-palette-gray-600;
$color-accessible-text-gray-bg: $color-palette-gray-op-10;
$color-alert-gray: $color-palette-gray;
$color-alert-gray-light: $color-palette-gray-tint;

// Yellow sass variables
$color-palette-yellow-shade: #bd5001;
$color-palette-yellow: #ffb444;
$color-palette-yellow-tint: #fff8ec;

$color-palette-yellow-op-08: rgba($color-palette-yellow, 0.8);
$color-palette-yellow-op-10: rgba($color-palette-yellow, 0.1);
$color-palette-yellow-op-15: rgba($color-palette-yellow, 0.15);
$color-palette-yellow-op-20: rgba($color-palette-yellow, 0.2);
$color-palette-yellow-op-07: rgba($color-palette-yellow, 0.07);

$color-accessible-text-yellow: $color-palette-yellow-shade;
$color-accessible-text-yellow-bg: $color-palette-yellow-tint;
$color-alert-yellow: $color-palette-yellow;
$color-alert-yellow-light: $color-palette-yellow-tint;

// Red sass variables
$color-palette-red-shade: #d82b2e;
$color-palette-red: #f65446;
$color-palette-red-tint: #fff6f6;

$color-palette-red-op-08: rgba($color-palette-red, 0.8);
$color-palette-red-op-10: rgba($color-palette-red, 0.1);
$color-palette-red-op-15: rgba($color-palette-red, 0.15);
$color-palette-red-op-20: rgba($color-palette-red, 0.2);
$color-palette-red-op-07: rgba($color-palette-red, 0.07);
$color-accessible-text-red: $color-palette-red-shade;
$color-accessible-text-red-bg: $color-palette-red-op-08;
$color-alert-red: $color-palette-red;
$color-alert-red-light: $color-palette-red-tint;

// Fuchsia sass variables
$color-palette-fuchsia-shade: #c336e5;
$color-palette-fuchsia: #c336e5;
$color-palette-fuchsia-tint: #f9ebfc;

$color-palette-fuchsia-op-08: rgba($color-palette-fuchsia, 0.8);
$color-palette-fuchsia-op-10: rgba($color-palette-fuchsia, 0.1);
$color-palette-fuchsia-op-15: rgba($color-palette-fuchsia, 0.15);
$color-palette-fuchsia-op-20: rgba($color-palette-fuchsia, 0.2);

$color-accessible-text-fuchsia: $color-palette-fuchsia-shade;
$color-accessible-text-fuchsia-bg: $color-palette-fuchsia-op-08;
$color-alert-fuchsia: $color-palette-fuchsia;
$color-alert-fuchsia-light: $color-palette-fuchsia-tint;

// Green sass variables
$color-palette-green-shade: #0b6948;
$color-palette-green: #1ea97c;
$color-palette-green-tint: #f5fdf8;

$color-palette-green-op-80: rgba($color-palette-green, 0.8);
$color-palette-green-op-70: rgba($color-palette-green, 0.7);
$color-palette-green-op-10: rgba($color-palette-green, 0.1);
$color-palette-green-op-15: rgba($color-palette-green, 0.15);
$color-palette-green-op-20: rgba($color-palette-green, 0.2);
$color-palette-green-op-07: rgba($color-palette-green, 0.07);

$color-accessible-text-green: $color-palette-green-shade;
$color-accessible-text-green-bg: $color-palette-green-op-80;
$color-alert-green: $color-palette-green;
$color-alert-green-light: $color-palette-green-tint;

// Purple sass variables
$color-palette-purple-shade: $color-palette-secondary-700;
$color-palette-purple: $color-palette-secondary-500;
$color-palette-purple-tint: $color-palette-secondary-100;

$color-palette-purple-op-08: rgba($color-palette-purple, 0.8);
$color-palette-purple-op-10: rgba($color-palette-purple, 0.1);
$color-palette-purple-op-15: rgba($color-palette-purple, 0.15);
$color-palette-purple-op-20: rgba($color-palette-purple, 0.2);

$color-accessible-text-purple: $color-palette-purple-shade;
$color-accessible-text-purple-bg: $color-palette-purple-op-08;
$color-alert-purple: $color-palette-purple;
$color-alert-purple-light: $color-palette-purple-tint;

// Blue sass variables
$color-palette-blue-shade: #18186d;
$color-palette-blue: #1243e3;
$color-palette-blue-tint: #dbeafe;

$color-palette-blue-op-08: rgba($color-palette-blue, 0.8);
$color-palette-blue-op-10: rgba($color-palette-blue, 0.1);
$color-palette-blue-op-15: rgba($color-palette-blue, 0.15);
$color-palette-blue-op-20: rgba($color-palette-blue, 0.2);
$color-palette-blue-op-70: rgba($color-palette-blue, 0.7);

$color-accessible-text-blue: $color-palette-blue-shade;
$color-accessible-text-blue-bg: $color-palette-blue-op-08;
$color-alert-blue: $color-palette-blue;
$color-alert-blue-light: $color-palette-blue-tint;

// LEGACY COLORS
$brand-background: var(--color-palette-primary-800);
$deleted-content-color: #fdb8c0;
$red: $color-accessible-text-red;
$error: $color-accessible-text-red;
$new-content-color: #ddffdd;
$orange: #f3762a;
$success: $color-accessible-text-green;
$foreground-active: #848484;

@mixin root-colors {
    --color-primary-h: 225deg;
    --color-primary-s: 85%;
    --color-secondary-h: 256;
    --color-secondary-s: 85%;
    --color-black-h: 229deg;
    --color-black-s: 12%;
    --color-black-l: 9%;
    --color-white-h: 0deg;
    --color-white-s: 0%;
    --color-white-l: 100%;

    /**
  * @tokens Colors
  * @presenter Color
  */
    --color-palette-primary-100: hsl(var(--color-primary-h) var(--color-primary-s) 98%);
    --color-palette-primary-200: hsl(var(--color-primary-h) var(--color-primary-s) 96%);
    --color-palette-primary-300: hsl(var(--color-primary-h) var(--color-primary-s) 90%);
    --color-palette-primary-400: hsl(var(--color-primary-h) var(--color-primary-s) 78%);
    --color-palette-primary-500: hsl(var(--color-primary-h) var(--color-primary-s) 60%);
    --color-palette-primary-600: hsl(var(--color-primary-h) var(--color-primary-s) 48%);
    --color-palette-primary-700: hsl(var(--color-primary-h) var(--color-primary-s) 36%);
    --color-palette-primary-800: hsl(var(--color-primary-h) var(--color-primary-s) 27%);
    --color-palette-primary-900: hsl(var(--color-primary-h) var(--color-primary-s) 21%);

    --color-palette-primary-op-10: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.1);
    --color-palette-primary-op-20: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.2);
    --color-palette-primary-op-30: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.3);
    --color-palette-primary-op-40: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.4);
    --color-palette-primary-op-50: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.5);
    --color-palette-primary-op-60: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.6);
    --color-palette-primary-op-70: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.7);
    --color-palette-primary-op-80: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.8);
    --color-palette-primary-op-90: hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.9);

    --color-palette-primary-shade: var(--color-palette-primary-600);
    --color-palette-primary: var(--color-palette-primary-500);
    --color-palette-primary-tint: var(--color-palette-primary-200);

    --color-palette-secondary-100: hsl(var(--color-secondary-h) var(--color-secondary-s) 98%);
    --color-palette-secondary-200: hsl(var(--color-secondary-h) var(--color-secondary-s) 94%);
    --color-palette-secondary-300: hsl(var(--color-secondary-h) var(--color-secondary-s) 84%);
    --color-palette-secondary-400: hsl(var(--color-secondary-h) var(--color-secondary-s) 71%);
    --color-palette-secondary-500: hsl(var(--color-secondary-h) var(--color-secondary-s) 60%);
    --color-palette-secondary-600: hsl(var(--color-secondary-h) var(--color-secondary-s) 51%);
    --color-palette-secondary-700: hsl(var(--color-secondary-h) var(--color-secondary-s) 42%);
    --color-palette-secondary-800: hsl(var(--color-secondary-h) var(--color-secondary-s) 30%);
    --color-palette-secondary-900: hsl(var(--color-secondary-h) var(--color-secondary-s) 22%);

    --color-palette-secondary-op-10: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.1
    );
    --color-palette-secondary-op-20: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.2
    );
    --color-palette-secondary-op-30: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.3
    );
    --color-palette-secondary-op-40: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.4
    );
    --color-palette-secondary-op-50: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.5
    );
    --color-palette-secondary-op-60: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.6
    );
    --color-palette-secondary-op-70: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.7
    );
    --color-palette-secondary-op-80: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.8
    );
    --color-palette-secondary-op-90: hsla(
        var(--color-secondary-h),
        var(--color-secondary-s),
        60%,
        0.9
    );

    --color-palette-secondary-shade: var(--color-palette-secondary-600);
    --color-palette-secondary: var(--color-palette-secondary-500);
    --color-palette-secondary-tint: var(--color-palette-secondary-200);

    /* COLOR BLACK OPACITY */
    --color-palette-black-op-10: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.1
    );
    --color-palette-black-op-20: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.2
    );
    --color-palette-black-op-30: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.1
    );
    --color-palette-black-op-40: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.4
    );
    --color-palette-black-op-50: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.5
    );
    --color-palette-black-op-60: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.6
    );
    --color-palette-black-op-70: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.7
    );
    --color-palette-black-op-80: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.8
    );
    --color-palette-black-op-90: hsla(
        var(--color-black-h),
        var(--color-black-l),
        var(--color-black-l),
        0.9
    );

    /* COLOR WHITE OPACITY */
    --color-palette-white-op-10: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.1
    );
    --color-palette-white-op-20: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.2
    );
    --color-palette-white-op-30: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.3
    );
    --color-palette-white-op-40: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.4
    );
    --color-palette-white-op-50: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.5
    );
    --color-palette-white-op-60: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.6
    );
    --color-palette-white-op-70: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.7
    );
    --color-palette-white-op-80: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.8
    );
    --color-palette-white-op-90: hsla(
        var(--color-white-h),
        var(--color-white-l),
        var(--color-white-l),
        0.9
    );

    /**
  * @tokens-end
  */

    --color-background: #3a3847;
    --empty-message: "";

    /* primeflex https://primeflex.org/theming  */

    --primary-100: var(--color-palette-primary-100);
    --primary-200: var(--color-palette-primary-200);
    --primary-300: var(--color-palette-primary-300);
    --primary-400: var(--color-palette-primary-400);
    --primary-500: var(--color-palette-primary-500);
    --primary-600: var(--color-palette-primary-600);
    --primary-700: var(--color-palette-primary-700);
    --primary-800: var(--color-palette-primary-800);
    --primary-900: var(--color-palette-primary-900);

    --red-100: var(--color-palette-red-100);
    --red-200: var(--color-palette-red-200);
    --red-300: var(--color-palette-red-300);
    --red-400: var(--color-palette-red-400);
    --red-500: var(--color-palette-red-500);
    --red-600: var(--color-palette-red-600);
    --red-700: var(--color-palette-red-700);
    --red-800: var(--color-palette-red-800);
    --red-900: var(--color-palette-red-900);

    --gray-100: #fafafb;
    --gray-200: #f3f3f4;
    --gray-300: #ebecef;
    --gray-400: #d1d4db;
    --gray-500: #afb3c0;
    --gray-600: #8d92a5;
    --gray-700: #6c7389;
    --gray-800: #515667;
    --gray-900: #3d404d;

    --surface-500: #9e9e9e;
    --surface-900: #212121;
}
