:root {
  --md-sys-main-blue: #B4E4FF;
  --md-sys-main-blue-hover: #9adbff;
  --md-sys-main-blue-active: #86d3ff;
  --md-sys-main-blue-border: rgba(158,208,255,0.2);
  --md-sys-main-blue-transparent-85: rgba(95,197,255,0.15);
  --md-sys-main-blue-transparent-85-hover: rgba(59,147,197,0.15);
  --md-sys-main-blue-transparent-85-active: rgba(35,118,164,0.15);
  --md-sys-main-pink: #f9b4ff;
  --md-sys-main-pink-hover: #f79dff;
  --md-sys-main-pink-active: #f79aff;
  --md-sys-main-pink-border: rgba(246,140,255,0.2);
  --md-sys-main-pink-transparent-85: rgba(249,180,255,0.15);
  --md-sys-main-pink-transparent-85-hover: rgba(196,119,203,0.15);
  --md-sys-main-pink-transparent-85-active: rgba(165,86,171,0.15);
  --md-sys-main-discord: #5865F2;
  --md-sys-main-discord-hover: #4752cf;
  --md-sys-main-discord-active: #434ecd;
  --md-sys-main-discord-border: rgba(74,86,215,0.2);
  --md-sys-main-discord-transparent-85: rgba(88, 101, 242, 0.1);
  --md-sys-main-discord-transparent-85-hover: rgba(88, 101, 242, 0.1);
  --md-sys-main-discord-transparent-85-active: rgba(88, 101, 242, 0.1);
  --md-sys-main-premium: #ede87d;
  --md-sys-main-premium-hover: #e0db62;
  --md-sys-main-premium-active: #dad65b;
  --md-sys-main-premium-border: rgba(211,206,73,0.2);
  --md-sys-main-premium-transparent-85: rgba(211,206,73,0.15);
  --md-sys-main-premium-transparent-85-hover: rgba(170,166,59,0.15);
  --md-sys-main-premium-transparent-85-active: rgba(147,144,42,0.15);
  --md-sys-main-green: #30cb30;
  --md-sys-main-green-hover: #31b031;
  --md-sys-main-green-active: #30b530;
  --md-sys-main-green-border: rgba(85,255,85,0.02);
  --md-sys-main-green-transparent-85: rgba(48,203,48,0.25);
  --md-sys-main-green-transparent-85-hover: rgba(49,170,49,0.25);
  --md-sys-main-green-transparent-85-active: rgba(36,156,36,0.25);
  --md-sys-main-warning: #b5433c;
  --md-sys-main-warning-hover: #a43e37;
  --md-sys-main-warning-active: #b5433c;
  --md-sys-main-warning-border: rgba(181,67,60,0.2);
  --md-sys-main-warning-transparent-85: rgba(181,67,60,0.15);
  --md-sys-main-warning-transparent-85-hover: rgba(164,58,52,0.15);
  --md-sys-main-warning-transparent-85-active: rgba(111,45,41,0.15);
  --sys-main-backround-dark: #0d0d0d;
  --sys-main-backround-dark-var1: #0d0d0d;
  --sys-main-backround-dark-var2: #252525;
  --sys-main-backround-dark-var3: #323232;
  --sys-main-backround-dark-var4: #454545;
  --sys-main-backround-dark-var5: #888888;
}

:root {
  --font-family-base: 'Inter', -apple-system, system-ui, sans-serif;
  --sys-text-color-white: #d0d0d0;
  --sys-text-color-blue: var(--md-sys-main-blue);
  --sys-text-color-pink: var(--md-sys-main-pink);
  --sys-text-gradient-ping-blue: linear-gradient(90deg, #ffa5fb 0%, #8bceff 100%);
  --sys-text-color-primary: #ffffff;
  --sys-text-color-muted: rgba(255, 255, 255, 0.7);
  --sys-text-color-subtle: rgba(255, 255, 255, 0.5);
  --sys-gradient-primary: linear-gradient(135deg, #8bceff 0%, #ffa5fb 100%);
  --sys-color-pastel-blue: #8bceff;
  --sys-color-pastel-pink: #ffa5fb;
  --sys-border-color: rgba(180, 228, 255, 0.08);
  --sys-background-glow: rgba(180, 228, 255, 0.1);
  --sys-background-accent: rgba(180, 228, 255, 0.02);
  --sys-glass-background: rgba(13, 13, 13, 0.7);
  --sys-glass-background-light: rgba(27, 27, 27, 0.65);
  --sys-glass-background-lighter: rgba(37, 37, 37, 0.6);
  --sys-milk-glass-background: rgba(13, 13, 13, 0.85);
  --sys-milk-glass-background-light: rgba(27, 27, 27, 0.8);
  --sys-milk-glass-background-lighter: rgba(37, 37, 37, 0.75);
  --sys-glass-blur: blur(8px);
  --sys-glass-blur-heavy: blur(12px);
  --sys-milk-glass-blur: blur(12px) saturate(180%);
}

:root {
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --width-xs: 20rem;
  --width-sm: 24rem;
  --width-md: 28rem;
  --width-lg: 32rem;
  --width-xl: 36rem;
  --width-2xl: 42rem;
  --width-3xl: 48rem;
  --fluid-1: clamp(20rem, 25vw, 24rem);
  --fluid-2: clamp(24rem, 33vw, 32rem);
  --fluid-3: clamp(28rem, 50vw, 42rem);
  --fluid-4: clamp(32rem, 66vw, 48rem);
  --fluid-5: clamp(36rem, 75vw, 56rem);
  --fluid-6: clamp(42rem, 90vw, 64rem);
  --fluid-full: 100vw;
  --height-sm: 2rem;
  --height-md: 2.5rem;
  --height-lg: 3rem;
  --height-xl: 3.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --z-below: -1;
  --z-normal: 0;
  --z-above: 1;
  --z-header: 10;
  --z-modal: 100;
  --z-toast: 1000;
  --container-sm: min(100% - 2rem, 640px);
  --container-md: min(100% - 2rem, 768px);
  --container-lg: min(100% - 2rem, 1024px);
  --container-xl: min(100% - 2rem, 1280px);
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  --animation-float: float 6s ease-in-out infinite;
}

body {
  z-index: -20;
  font-family: var(--font-family-base);
  margin: 0;
  background-image: radial-gradient(circle at 100% 0%, rgba(180, 228, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 0% 100%, rgba(255, 214, 236, 0.03) 0%, transparent 50%);
  min-height: 100vh;
  flex-direction: column;
  display: flex;
  background: var(--sys-main-backround-dark);
  background-color: var(--sys-main-backround-dark);
}