:root {


  --primary-50: #0D323F;
  --primary-100: #1D4C5C;
  --primary-200: #1E5A6C;
  --primary-300: #1A6F84;
  --primary-400: #178AA3;
  --primary-500: #19ACC1;
  --primary-600: #26C4D9;
  --primary-700: #4DEFFF;
  --primary-800: #74E0EC;
  --primary-900: #ADEEF4;
  --primary-950: #D3F7FA;



  --neutral-50: #00171F;
  --neutral-100: #002B36;
  --neutral-200: #044B5B;
  --neutral-300: #005E6E;
  --neutral-400: #178AA3;
  --neutral-500: #4DEFFF;
  --neutral-600: #74E0EC;
  --neutral-700: #A5F6FF;
  --neutral-800: #D3F7FA;
  --neutral-900: #E8FBFC;
  --neutral-950: #EFFFFF;



  --success-50: #064E3B;
  --success-100: #065F46;
  --success-200: #047857;
  --success-300: #059669;
  --success-400: #10B981;
  --success-500: #34D399;
  --success-600: #6EE7B7;
  --success-700: #A7F3D0;
  --success-800: #D1FAE5;
  --success-900: #ECFDF5;
  --success-950: #F0FDF4;

  --warning-50: #78350F;
  --warning-100: #92400E;
  --warning-200: #B45309;
  --warning-300: #D97706;
  --warning-400: #F59E0B;
  --warning-500: #FBBF24;
  --warning-600: #FCD34D;
  --warning-700: #FDE68A;
  --warning-800: #FEF3C7;
  --warning-900: #FEFCE8;
  --warning-950: #FFFBEB;

  --error-50: #7F1D1D;
  --error-100: #991B1B;
  --error-200: #B91C1C;
  --error-300: #DC2626;
  --error-400: #EF4444;
  --error-500: #F87171;
  --error-600: #FCA5A5;
  --error-700: #FECACA;
  --error-800: #FEE2E2;
  --error-900: #FEF2F2;
  --error-950: #FEF2F2;

  --info-50: #1E3A8A;
  --info-100: #1E40AF;
  --info-200: #1D4ED8;
  --info-300: #2563EB;
  --info-400: #3B82F6;
  --info-500: #60A5FA;
  --info-600: #93C5FD;
  --info-700: #BFDBFE;
  --info-800: #DBEAFE;
  --info-900: #EFF6FF;
  --info-950: #EFF6FF;



  --social-facebook: #1877F2;
  --social-twitter: #1DA1F2;
  --social-linkedin: #0A66C2;
  --social-reddit: #FF4500;



  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-14: 7rem;
  --space-16: 8rem;



  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
  --container-4xl: 1400px;


  --breakpoint-xs: 320px;
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1920px;



  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;


  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-base: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  --radius-circle: 50%;



  --shadow-glow-sm: 0 0 10px color-mix(in srgb, var(--primary-700) 30%, transparent);
  --shadow-glow-md: 0 0 20px color-mix(in srgb, var(--primary-700) 40%, transparent);
  --shadow-left-lg: -10px 0 30px color-mix(in srgb, var(--neutral-50) 30%, transparent);




  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);


  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;


  --transition-fast: all 150ms ease-in-out;
  --transition-base: all 300ms ease-in-out;
  --transition-slow: all 500ms ease-in-out;



  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;
  --z-fullscreen: 9999;
  --z-max: 2147483647;




  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-wide: 21 / 9;
  --aspect-ultrawide: 32 / 9;


  --max-width-prose: 65ch;
  --max-width-screen: 100vw;



  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-disabled: 0.4;
  --opacity-medium: 0.5;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;



  --color-primary: var(--primary-700);
  --color-primary-hover: var(--primary-600);
  --color-bg: var(--neutral-50);
  --color-surface: var(--neutral-100);
  --color-text-primary: var(--neutral-950);
  --color-text-secondary: var(--neutral-700);
  --color-border: var(--neutral-200);
  --color-logo-text: var(--neutral-950);


  --color-success: var(--success-400);
  --color-warning: var(--warning-400);
  --color-error: var(--error-400);
  --color-info: var(--info-400);



  --gradient-primary: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 100%);
  --gradient-dark: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);



  --color-neutral-0: var(--neutral-950);
  --color-neutral-300: var(--neutral-200);
  --color-neutral-500: var(--neutral-700);
  --color-neutral-1000: var(--neutral-50);
  --color-accent: var(--primary-700);
  --color-accent-warning: var(--warning-400);
  --color-brand-primary: var(--primary-700);
  --color-brand-primary-alpha-10: color-mix(in srgb, var(--primary-700) 10%, transparent);
  --color-brand-primary-alpha-50: color-mix(in srgb, var(--primary-700) 50%, transparent);
  --color-dropdown-hover: color-mix(in srgb, var(--primary-700) 10%, transparent);
  --color-input-bg: color-mix(in srgb, var(--primary-700) 5%, transparent);
  --color-bg-primary: var(--neutral-50);
  --color-bg-secondary: var(--neutral-100);
  --color-bg-tertiary: var(--neutral-100);
  --color-bg-dark: var(--neutral-50);
  --color-bg-dark-1: var(--neutral-100);
  --color-text-light: var(--neutral-950);
  --color-text-muted: var(--neutral-700);
  --color-bg-overlay: color-mix(in srgb, var(--neutral-50) 80%, transparent);
  --color-gray-50: var(--neutral-100);
  --color-gray-300: var(--neutral-200);
  --color-gray-500: var(--neutral-700);
  --color-gray-900: var(--neutral-950);
  --color-primary-dark: var(--primary-700);
  --color-dark-alpha-98: var(--neutral-100);
  --color-white-alpha-98: var(--neutral-100);
  --color-success-alpha-10: color-mix(in srgb, var(--success-400) 10%, transparent);
  --color-social-facebook: var(--social-facebook);
  --color-social-twitter: var(--social-twitter);
  --color-social-linkedin: var(--social-linkedin);
  --color-social-reddit: var(--social-reddit);
  --color-overlay-dark: color-mix(in srgb, var(--neutral-50) 90%, transparent);
  --color-overlay-medium: color-mix(in srgb, var(--neutral-50) 50%, transparent);
  --gradient-blog-title: var(--gradient-primary);

  color-scheme: dark;
}



[data-theme="light"] {
  --primary-50: #D3F7FA;
  --primary-100: #ADEEF4;
  --primary-200: #74E0EC;
  --primary-300: #4DEFFF;
  --primary-400: #26C4D9;
  --primary-500: #19ACC1;
  --primary-600: #178AA3;
  --primary-700: #1A6F84;
  --primary-800: #1E5A6C;
  --primary-900: #1D4C5C;
  --primary-950: #0D323F;

  --neutral-50: #EFFFFF;
  --neutral-100: #E8FBFC;
  --neutral-200: #C6F8FF;
  --neutral-300: #A5F6FF;
  --neutral-400: #74E0EC;
  --neutral-500: #4DEFFF;
  --neutral-600: #178AA3;
  --neutral-700: #005E6E;
  --neutral-800: #002B36;
  --neutral-900: #00171F;
  --neutral-950: #000B0E;

  --success-50: #F0FDF4;
  --success-100: #ECFDF5;
  --success-200: #D1FAE5;
  --success-300: #A7F3D0;
  --success-400: #6EE7B7;
  --success-500: #34D399;
  --success-600: #10B981;
  --success-700: #059669;
  --success-800: #047857;
  --success-900: #065F46;
  --success-950: #064E3B;

  --warning-50: #FFFBEB;
  --warning-100: #FEFCE8;
  --warning-200: #FEF3C7;
  --warning-300: #FDE68A;
  --warning-400: #FCD34D;
  --warning-500: #FBBF24;
  --warning-600: #F59E0B;
  --warning-700: #D97706;
  --warning-800: #B45309;
  --warning-900: #92400E;
  --warning-950: #78350F;

  --error-50: #FEF2F2;
  --error-100: #FEF2F2;
  --error-200: #FEE2E2;
  --error-300: #FECACA;
  --error-400: #FCA5A5;
  --error-500: #F87171;
  --error-600: #EF4444;
  --error-700: #DC2626;
  --error-800: #B91C1C;
  --error-900: #991B1B;
  --error-950: #7F1D1D;

  --info-50: #EFF6FF;
  --info-100: #EFF6FF;
  --info-200: #DBEAFE;
  --info-300: #BFDBFE;
  --info-400: #93C5FD;
  --info-500: #60A5FA;
  --info-600: #3B82F6;
  --info-700: #2563EB;
  --info-800: #1D4ED8;
  --info-900: #1E40AF;
  --info-950: #1E3A8A;

  --shadow-glow-sm: 0 0 10px color-mix(in srgb, var(--primary-700) 30%, transparent);
  --shadow-glow-md: 0 0 20px color-mix(in srgb, var(--primary-700) 40%, transparent);
  --shadow-left-lg: -10px 0 30px color-mix(in srgb, var(--neutral-950) 15%, transparent);

  --gradient-primary: linear-gradient(135deg, var(--primary-300) 0%, var(--primary-400) 100%);
  --gradient-dark: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);

  --color-logo-text: var(--neutral-950);

  color-scheme: light;
}