:root {
    --base-white: hsl(0 0% 100%);
    --base-black: hsl(0 0% 0%);
    --base-dark-1: hsl(240 10% 4%);
    --base-dark-2: hsl(240 10% 6%);
    --base-dark-3: hsl(240 8% 9%);
    --base-dark-4: hsl(240 9% 13%);
    --base-dark-5: hsl(240 9% 16%);
    --base-dark-6: hsl(240 9% 21%);
    --base-light-1: hsl(240 9% 98%);
    --base-light-2: hsl(240 10% 96%);
    --base-light-3: hsl(240 10% 94%);
    --base-light-4: hsl(240 10% 90%);
    --base-light-5: hsl(240 8% 86%);
    --base-light-6: hsl(240 8% 81%);

    --font-size-xxs: 0.5rem;
    --font-size-xs: 0.75rem;
    --font-size-s: 0.875rem;
    --font-size-sm: 1rem;
    --font-size-m: 1rem;
    --font-size-ml: 1.25rem;
    --font-size-l: 1.25rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 1.75rem;
    --font-size-xxl: 3rem;

    --line-height-xxs: 1.5;
    --line-height-xs: 1.5;
    --line-height-s: 1.5;
    --line-height-sm: 1.25;
    --line-height-m: 1.5;
    --line-height-ml: 1.2;
    --line-height-l: 1.15;
    --line-height-lg: 1.167;
    --line-height-xl: 1.15;
    --line-height-xxl: 1;

    --gap-xs: 0.25rem;
    --gap-s: 0.5rem;
    --gap-sm: 0.75rem;
    --gap-m: 1rem;
    --gap-ml: 1.5rem;
    --gap-l: 2rem;
    --gap-xl: 4rem;
    --radius-s: 4px;
    --radius-m: 6px;
    --radius-l: 12px;
    --radius-xl: 20px;

    --transition-time: 300ms;
    --transition-func: ease-in-out;

    --blue-50: hsl(204 71% 99%);
    --blue-100: hsl(208 81% 96%);
    --blue-200: hsl(208 84% 90%);
    --blue-300: hsl(208 85% 82%);
    --blue-400: hsl(208 85% 74%);
    --blue-500: hsl(207 86% 65%);
    --blue-600: hsl(207 54% 51%);
    --blue-700: hsl(207 53% 41%);
    --blue-800: hsl(207 55% 29%);
    --blue-900: hsl(207 60% 18%);
    --blue-950: hsl(207 74% 8%);
    --danger-50: hsl(0 67% 99%);
    --danger-100: hsl(0 76% 97%);
    --danger-200: hsl(4 76% 92%);
    --danger-300: hsl(2 78% 86%);
    --danger-400: hsl(2 75% 79%);
    --danger-500: hsl(1 73% 73%);
    --danger-600: hsl(0 41% 58%);
    --danger-700: hsl(0 30% 47%);
    --danger-800: hsl(0 31% 33%);
    --danger-900: hsl(2 35% 20%);
    --danger-950: hsl(0 43% 9%);
    --gray-50: hsl(240 20% 99%);
    --gray-100: hsl(240 10% 96%);
    --gray-200: hsl(240 10% 90%);
    --gray-300: hsl(240 9% 82%);
    --gray-400: hsl(240 9% 75%);
    --gray-500: hsl(240 9% 68%);
    --gray-600: hsl(240 9% 55%);
    --gray-700: hsl(240 9% 45%);
    --gray-800: hsl(240 9% 32%);
    --gray-900: hsl(240 8% 20%);
    --gray-950: hsl(240 9% 9%);
    --primary-50: hsl(100 33% 98%);
    --primary-100: hsl(102 36% 95%);
    --primary-200: hsl(104 34% 87%);
    --primary-300: hsl(102 36% 76%);
    --primary-400: hsl(103 36% 66%);
    --primary-500: hsl(102 36% 55%);
    --primary-600: hsl(101 32% 43%);
    --primary-700: hsl(102 33% 35%);
    --primary-800: hsl(101 34% 24%);
    --primary-900: hsl(101 39% 15%);
    --primary-950: hsl(104 48% 6%);
    --warn-50: hsl(36 56% 98%);
    --warn-100: hsl(19 73% 96%);
    --warn-200: hsl(33 66% 87%);
    --warn-300: hsl(32 67% 78%);
    --warn-400: hsl(32 68% 67%);
    --warn-500: hsl(33 68% 55%);
    --warn-600: hsl(34 62% 43%);
    --warn-700: hsl(34 64% 34%);
    --warn-800: hsl(34 67% 24%);
    --warn-900: hsl(34 75% 14%);
    --warn-950: hsl(31 82% 6%);
    --background: var(--base-dark-2);
    --base-hover: var(--base-dark-6);
    --dropdown: var(--base-dark-4);
    --input-border: var(--gray-900);
    --input-border-disabled: var(--gray-900);
    --input-border-focused: var(--gray-400);
    --input-border-hovered: var(--gray-500);
    --input-disabled: var(--base-dark-3);
    --input-disabled-borderless: hsl(240 7% 17%);
    --input-readonly: var(--base-dark-2);
    --input-fill: var(--gray-950);
    --input-fill-borderless: hsl(240 10% 6%);
    --input-fill-focused: var(--base-dark-2);
    --input-fill-focused-borderless: hsl(240 10% 4%);
    --layer: var(--base-dark-3);
    --layer-above: var(--base-dark-5);
    --layer-hover: var(--base-dark-4);
    --layer-border: var(--base-dark-4);
    --layer-border-hover: var(--base-dark-6);
    --text-disabled: hsl(240 4% 25%);
    --text-ghost: hsl(240 3% 42%);
    --text-primary: hsl(240 2% 88%);
    --text-secondary: hsl(240 3% 62%);
    --button-danger: var(--danger-500);
    --button-danger-active: hsl(0 83% 68%);
    --button-danger-focus: var(--danger-300);
    --button-danger-hover: hsl(0 95% 72%);
    --button-danger-text: var(--danger-950);
    --button-disabled: var(--gray-900);
    --button-disabled-text: var(--text-ghost);
    --button-primary: var(--primary-500);
    --button-primary-active: hsl(102 44% 53%);
    --button-primary-focus: var(--primary-300);
    --button-primary-hover: hsl(102 48% 57%);
    --button-primary-text: var(--primary-950);
    --button-secondary: var(--gray-900);
    --button-secondary-active: hsl(240 13% 22%);
    --button-secondary-focus: var(--gray-500);
    --button-secondary-hover: hsl(240 11% 25%);
    --button-secondary-text: var(--gray-200);
    --button-warn: var(--warn-500);
    --button-warn-active: hsl(33 75% 53%);
    --button-warn-focus: var(--warn-300);
    --button-warn-hover: hsl(33 82% 57%);
    --button-warn-text: var(--warn-950);
    --button-checked: var(--blue-800);
    --button-checked-active: hsl(207 57% 28%);
    --button-checked-focus: var(--blue-400);
    --button-checked-hover: hsl(207 68% 29%);
    --button-checked-text: var(--blue-50);
    --status-at-risk: hsl(33 68% 55%);
    --status-blocked: hsl(46 67% 58%);
    --status-cancelled: hsl(284 57% 78%);
    --status-draft: var(--gray-400);
    --status-failed: var(--danger-500);
    --status-finished: var(--primary-500);
    --status-in-progress: hsl(207 86% 65%);
    --status-background-at-risk: hsl(34 75% 14%);
    --status-background-blocked: hsl(46 84% 12%);
    --status-background-cancelled: hsl(284 29% 20%);
    --status-background-draft: var(--gray-900);
    --status-background-failed: var(--danger-900);
    --status-background-finished: var(--primary-900);
    --status-background-in-progress: var(--blue-900);
    --check-default: var(--gray-600);
    --check-default-hover: var(--gray-500);
    --check-default-disabled: var(--gray-800);
    --check-checked: var(--blue-600);
    --check-checked-hover: var(--blue-500);
    --check-checked-disabled: var(--gray-800);
    --check-outline: var(--gray-500);
    --check-mark: var(--base-white);
    --check-mark-disabled: var(--text-ghost);
    --check-rounded-checked: var(--primary-500);
    --check-rounded-checked-hover: var(--primary-600);
    --check-rounded-mark: var(--primary-950);
    --switch-backgound: var(--background);
    --switch-text-default: var(--text-secondary);
    --switch-text-hovered: var(--text-primary);
    --switch-text-active: var(--text-primary);
    --switch-background-active: hsl(240 8% 20%);
    --card-border: transparent;
}
:root {
    --text-primary: #FFFFFF;
    --text-secondary: #f4f4f5;

    --background: #000000;
    --foreground: #ECEDEE;
    --divider: rgba(17, 17, 17, 0.15);

    --default-50: #18181b;
    --default-100: #27272a;
    --default-200: #3f3f46;
    --default-300: #52525b;
    --default-400: #71717a;
    --default-500: #a1a1aa;
    --default-600: #d4d4d8;
    --default-700: #e4e4e7;
    --default-800: #f4f4f5;
    --default-900: #fafafa;

    --secondary-50: #180828;
    --secondary-100: #301050;
    --secondary-200: #481878;
    --secondary-300: #6020a0;
    --secondary-400: #7828c8;
    --secondary-500: #9353d3;
    --secondary-600: #ae7ede;
    --secondary-700: #c9a9e9;
    --secondary-800: #e4d4f4;
    --secondary-900: #f2eafa;

    --secondary-50: #001731;
    --secondary-100: #002e62;
    --secondary-200: #004493;
    --secondary-300: #005bc4;
    --secondary-400: #006FEE;
    --secondary-500: #338ef7;
    --secondary-600: #66aaf9;
    --secondary-700: #99c7fb;
    --secondary-800: #cce3fd;
    --secondary-900: #e6f1fe;

    --success-50: #052814;
    --success-100: #095028;
    --success-200: #0e793c;
    --success-300: #12a150;
    --success-400: #17c964;
    --success-500: #45d483;
    --success-600: #74dfa2;
    --success-700: #a2e9c1;
    --success-800: #d1f4e0;
    --success-900: #e8faf0;

    --warning-50: #312107;
    --warning-100: #62420e;
    --warning-200: #936316;
    --warning-300: #c4841d;
    --warning-400: #f5a524;
    --warning-500: #f7b750;
    --warning-600: #f9c97c;
    --warning-700: #fbdba7;
    --warning-800: #fdedd3;
    --warning-900: #fefce8;

    --danger-50: #310413;
    --danger-100: #610726;
    --danger-200: #920b3a;
    --danger-300: #c20e4d;
    --danger-400: #f31260;
    --danger-500: #f54180;
    --danger-600: #f871a0;
    --danger-700: #faa0bf;
    --danger-800: #fdd0df;
    --danger-900: #fee7ef;
}