@theme {
  --color-background: #23262d;
  --color-surface: rgba(13, 17, 20, 0.302);
  --color-secondary: #23262d;
  --color-foreground: #f2f6fa;
  --color-muted-foreground: #bfc1c9;
  --color-primary: #61dafb;
  --color-border: rgb(52, 56, 65);
  --color-palette-1: #ffffff;
  --color-palette-3: rgba(60, 129, 245, 0.502);
  --color-palette-5: #0d0f14;
  --color-palette-6: rgba(135, 140, 150, 0.2);
  --color-palette-8: #e8c4f9;
  --color-palette-9: #d83333;
  --color-palette-10: #545864;
  --color-palette-12: rgba(85, 112, 179, 0.816);
  --color-palette-13: rgba(38, 74, 137, 0.502);
  --color-palette-14: #3178c6;
  --color-palette-15: #4bf3c8;
  --color-palette-16: #54b9ff;
  --color-palette-17: #1a3e57;
  --color-palette-18: #9ca3af;
  --color-palette-19: #acafff;
  --color-palette-20: #ffd493;
  --font-sans: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --text-xs: 0.75rem;
  --text-xs--line-height: 1.429;
  --text-sm: 0.844rem;
  --text-sm--line-height: 1.429;
  --text-base: 0.875rem;
  --text-base--line-height: 1.429;
  --text-lg: 1rem;
  --text-lg--line-height: 1;
  --text-xl: 1.125rem;
  --text-xl--line-height: 1;
  --text-2xl: 1.25rem;
  --text-2xl--line-height: 1;
  --text-3xl: 1.5rem;
  --text-3xl--line-height: 1;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 1;
  --font-weight-light: 300;
  --font-weight-380: 380;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --leading-tight: 1;
  --leading-snug: 1.25;
  --leading-normal: 1.429;
  --leading-relaxed: 1.5;
  --leading-loose: 1.65;
  --tracking-tight: 0.3px;
  --tracking-normal: 0.35px;
  --tracking-wide: 0.4px;
  --spacing-1: 2px;
  --spacing-2: 3px;
  --spacing-3: 4px;
  --spacing-4: 8px;
  --spacing-5: 12px;
  --spacing-6: 16px;
  --spacing-7: 20px;
  --spacing-8: 24px;
  --spacing-9: 32px;
  --spacing-10: 48px;
  --spacing-11: 64px;
  --spacing-12: 80px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 9999px;
  --shadow-sm: rgba(255, 255, 255, 0) 1.6px 1.6px 3.2px 0px;
  --shadow-md: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-lg: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(24, 24, 27, 0.03) 0px 5px 2px 0px, rgba(24, 24, 27, 0.1) 0px 3px 2px 0px, rgba(24, 24, 27, 0.17) 0px 1px 1px 0px, rgba(24, 24, 27, 0.2) 0px 0px 1px 0px, rgba(24, 24, 27, 0.2) 0px 0px 0px 0px;
  --shadow-xl: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --breakpoint-mobile-384: 24rem;
  --breakpoint-mobile-448: 28rem;
  --breakpoint-tablet-sm-640: 40rem;
  --breakpoint-tablet-sm-768: 48rem;
  --breakpoint-tablet: 64rem;
  --breakpoint-desktop: 80rem;
  --breakpoint-wide: 96rem;
}

:root {
  --border-1: 1px solid rgb(52, 56, 65);
  --border-2: 1px solid rgba(135, 140, 150, 0.2);
  --border-3: 1px solid rgb(35, 38, 45);
  --border-4: 1px solid rgb(232, 196, 249);
  --z-10: -50;
  --z-20: -10;
  --z-30: -2;
  --z-40: -1;
  --z-50: 10;
  --z-60: 20;
  --z-70: 30;
  --z-80: 50;
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --duration-slower: 0.5s;
  --duration-slowest: 1s;
  --duration-6: 1.5s;
  --default-transition-duration: 0.2s;
}