/* 
 * ═══════════════════════════════════════════════════════════════════════════
 * NAKSHORA CSS FRAMEWORK v1.0.0
 * The World's Most Comprehensive CSS Framework
 * Created by: Rizwan Rahim Chowdhury
 * Licensed under MIT Open Source License
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
  /* ═══ NEON CYBER PALETTE ═══ */
  --neon-purple-50: hsl(280, 100%, 97%);
  --neon-purple-100: hsl(280, 100%, 93%);
  --neon-purple-200: hsl(280, 100%, 85%);
  --neon-purple-300: hsl(280, 100%, 75%);
  --neon-purple-400: hsl(280, 100%, 65%);
  --neon-purple-500: hsl(280, 100%, 55%);
  --neon-purple-600: hsl(280, 100%, 45%);
  --neon-purple-700: hsl(280, 90%, 35%);
  --neon-purple-800: hsl(280, 80%, 25%);
  --neon-purple-900: hsl(280, 70%, 15%);
  --neon-purple-950: hsl(280, 60%, 8%);
  
  --neon-pink-50: hsl(320, 100%, 97%);
  --neon-pink-100: hsl(320, 100%, 93%);
  --neon-pink-200: hsl(320, 100%, 85%);
  --neon-pink-300: hsl(320, 100%, 75%);
  --neon-pink-400: hsl(320, 100%, 65%);
  --neon-pink-500: hsl(320, 100%, 55%);
  --neon-pink-600: hsl(320, 100%, 45%);
  --neon-pink-700: hsl(320, 90%, 35%);
  --neon-pink-800: hsl(320, 80%, 25%);
  --neon-pink-900: hsl(320, 70%, 15%);
  --neon-pink-950: hsl(320, 60%, 8%);
  
  --neon-cyan-50: hsl(180, 100%, 97%);
  --neon-cyan-100: hsl(180, 100%, 93%);
  --neon-cyan-200: hsl(180, 100%, 85%);
  --neon-cyan-300: hsl(180, 100%, 75%);
  --neon-cyan-400: hsl(180, 100%, 65%);
  --neon-cyan-500: hsl(180, 100%, 55%);
  --neon-cyan-600: hsl(180, 100%, 45%);
  --neon-cyan-700: hsl(180, 90%, 35%);
  --neon-cyan-800: hsl(180, 80%, 25%);
  --neon-cyan-900: hsl(180, 70%, 15%);
  --neon-cyan-950: hsl(180, 60%, 8%);
  
  --neon-lime-50: hsl(75, 100%, 97%);
  --neon-lime-100: hsl(75, 100%, 93%);
  --neon-lime-200: hsl(75, 100%, 85%);
  --neon-lime-300: hsl(75, 100%, 75%);
  --neon-lime-400: hsl(75, 100%, 65%);
  --neon-lime-500: hsl(75, 100%, 55%);
  --neon-lime-600: hsl(75, 100%, 45%);
  --neon-lime-700: hsl(75, 90%, 35%);
  --neon-lime-800: hsl(75, 80%, 25%);
  --neon-lime-900: hsl(75, 70%, 15%);
  --neon-lime-950: hsl(75, 60%, 8%);
  
  --neon-orange-50: hsl(30, 100%, 97%);
  --neon-orange-100: hsl(30, 100%, 93%);
  --neon-orange-200: hsl(30, 100%, 85%);
  --neon-orange-300: hsl(30, 100%, 75%);
  --neon-orange-400: hsl(30, 100%, 65%);
  --neon-orange-500: hsl(30, 100%, 55%);
  --neon-orange-600: hsl(30, 100%, 45%);
  --neon-orange-700: hsl(30, 90%, 35%);
  --neon-orange-800: hsl(30, 80%, 25%);
  --neon-orange-900: hsl(30, 70%, 15%);
  --neon-orange-950: hsl(30, 60%, 8%);

  /* ═══ PASTEL DREAM PALETTE ═══ */
  --pastel-rose-50: hsl(350, 100%, 98%);
  --pastel-rose-100: hsl(350, 90%, 95%);
  --pastel-rose-200: hsl(350, 85%, 90%);
  --pastel-rose-300: hsl(350, 80%, 85%);
  --pastel-rose-400: hsl(350, 75%, 80%);
  --pastel-rose-500: hsl(350, 70%, 75%);
  --pastel-rose-600: hsl(350, 65%, 65%);
  --pastel-rose-700: hsl(350, 60%, 55%);
  --pastel-rose-800: hsl(350, 55%, 45%);
  --pastel-rose-900: hsl(350, 50%, 35%);
  --pastel-rose-950: hsl(350, 45%, 25%);
  
  --pastel-lavender-50: hsl(270, 100%, 98%);
  --pastel-lavender-100: hsl(270, 90%, 95%);
  --pastel-lavender-200: hsl(270, 85%, 90%);
  --pastel-lavender-300: hsl(270, 80%, 85%);
  --pastel-lavender-400: hsl(270, 75%, 80%);
  --pastel-lavender-500: hsl(270, 70%, 75%);
  --pastel-lavender-600: hsl(270, 65%, 65%);
  --pastel-lavender-700: hsl(270, 60%, 55%);
  --pastel-lavender-800: hsl(270, 55%, 45%);
  --pastel-lavender-900: hsl(270, 50%, 35%);
  --pastel-lavender-950: hsl(270, 45%, 25%);
  
  --pastel-mint-50: hsl(150, 100%, 98%);
  --pastel-mint-100: hsl(150, 90%, 95%);
  --pastel-mint-200: hsl(150, 85%, 90%);
  --pastel-mint-300: hsl(150, 80%, 85%);
  --pastel-mint-400: hsl(150, 75%, 80%);
  --pastel-mint-500: hsl(150, 70%, 75%);
  --pastel-mint-600: hsl(150, 65%, 65%);
  --pastel-mint-700: hsl(150, 60%, 55%);
  --pastel-mint-800: hsl(150, 55%, 45%);
  --pastel-mint-900: hsl(150, 50%, 35%);
  --pastel-mint-950: hsl(150, 45%, 25%);
  
  --pastel-peach-50: hsl(20, 100%, 98%);
  --pastel-peach-100: hsl(20, 90%, 95%);
  --pastel-peach-200: hsl(20, 85%, 90%);
  --pastel-peach-300: hsl(20, 80%, 85%);
  --pastel-peach-400: hsl(20, 75%, 80%);
  --pastel-peach-500: hsl(20, 70%, 75%);
  --pastel-peach-600: hsl(20, 65%, 65%);
  --pastel-peach-700: hsl(20, 60%, 55%);
  --pastel-peach-800: hsl(20, 55%, 45%);
  --pastel-peach-900: hsl(20, 50%, 35%);
  --pastel-peach-950: hsl(20, 45%, 25%);
  
  --pastel-sky-50: hsl(200, 100%, 98%);
  --pastel-sky-100: hsl(200, 90%, 95%);
  --pastel-sky-200: hsl(200, 85%, 90%);
  --pastel-sky-300: hsl(200, 80%, 85%);
  --pastel-sky-400: hsl(200, 75%, 80%);
  --pastel-sky-500: hsl(200, 70%, 75%);
  --pastel-sky-600: hsl(200, 65%, 65%);
  --pastel-sky-700: hsl(200, 60%, 55%);
  --pastel-sky-800: hsl(200, 55%, 45%);
  --pastel-sky-900: hsl(200, 50%, 35%);
  --pastel-sky-950: hsl(200, 45%, 25%);

  /* ═══ ULTRA MINIMALIST PALETTE ═══ */
  --mono-white: hsl(0, 0%, 100%);
  --mono-50: hsl(0, 0%, 98%);
  --mono-100: hsl(0, 0%, 96%);
  --mono-200: hsl(0, 0%, 92%);
  --mono-300: hsl(0, 0%, 88%);
  --mono-400: hsl(0, 0%, 80%);
  --mono-500: hsl(0, 0%, 65%);
  --mono-600: hsl(0, 0%, 50%);
  --mono-700: hsl(0, 0%, 35%);
  --mono-800: hsl(0, 0%, 20%);
  --mono-900: hsl(0, 0%, 10%);
  --mono-950: hsl(0, 0%, 5%);
  --mono-black: hsl(0, 0%, 0%);
  
  --minimal-ice-50: hsl(210, 20%, 98%);
  --minimal-ice-100: hsl(210, 20%, 96%);
  --minimal-ice-200: hsl(210, 20%, 92%);
  --minimal-ice-300: hsl(210, 20%, 88%);
  --minimal-ice-400: hsl(210, 20%, 80%);
  --minimal-ice-500: hsl(210, 20%, 65%);
  --minimal-ice-600: hsl(210, 20%, 50%);
  --minimal-ice-700: hsl(210, 20%, 35%);
  --minimal-ice-800: hsl(210, 20%, 20%);
  --minimal-ice-900: hsl(210, 20%, 10%);
  --minimal-ice-950: hsl(210, 20%, 5%);

  /* ═══ NATURE INSPIRED PALETTE ═══ */
  --forest-50: hsl(140, 60%, 97%);
  --forest-100: hsl(140, 60%, 93%);
  --forest-200: hsl(140, 60%, 85%);
  --forest-300: hsl(140, 60%, 75%);
  --forest-400: hsl(140, 60%, 65%);
  --forest-500: hsl(140, 60%, 50%);
  --forest-600: hsl(140, 70%, 40%);
  --forest-700: hsl(140, 80%, 30%);
  --forest-800: hsl(140, 85%, 20%);
  --forest-900: hsl(140, 90%, 12%);
  --forest-950: hsl(140, 90%, 6%);
  
  --earth-50: hsl(30, 45%, 97%);
  --earth-100: hsl(30, 45%, 93%);
  --earth-200: hsl(30, 45%, 85%);
  --earth-300: hsl(30, 45%, 75%);
  --earth-400: hsl(30, 45%, 65%);
  --earth-500: hsl(30, 45%, 50%);
  --earth-600: hsl(30, 50%, 40%);
  --earth-700: hsl(30, 55%, 30%);
  --earth-800: hsl(30, 60%, 20%);
  --earth-900: hsl(30, 65%, 12%);
  --earth-950: hsl(30, 70%, 6%);
  
  --ocean-50: hsl(200, 80%, 97%);
  --ocean-100: hsl(200, 80%, 93%);
  --ocean-200: hsl(200, 80%, 85%);
  --ocean-300: hsl(200, 80%, 75%);
  --ocean-400: hsl(200, 80%, 65%);
  --ocean-500: hsl(200, 80%, 50%);
  --ocean-600: hsl(200, 85%, 40%);
  --ocean-700: hsl(200, 90%, 30%);
  --ocean-800: hsl(200, 95%, 20%);
  --ocean-900: hsl(200, 95%, 12%);
  --ocean-950: hsl(200, 95%, 6%);
  
  --sunset-50: hsl(15, 90%, 97%);
  --sunset-100: hsl(15, 90%, 93%);
  --sunset-200: hsl(15, 90%, 85%);
  --sunset-300: hsl(15, 90%, 75%);
  --sunset-400: hsl(15, 90%, 65%);
  --sunset-500: hsl(15, 90%, 55%);
  --sunset-600: hsl(15, 95%, 45%);
  --sunset-700: hsl(15, 95%, 35%);
  --sunset-800: hsl(15, 95%, 25%);
  --sunset-900: hsl(15, 95%, 15%);
  --sunset-950: hsl(15, 95%, 8%);

  /* ═══ BRUTALIST PALETTE ═══ */
  --brutal-red-50: hsl(0, 100%, 97%);
  --brutal-red-100: hsl(0, 100%, 90%);
  --brutal-red-200: hsl(0, 100%, 80%);
  --brutal-red-300: hsl(0, 100%, 70%);
  --brutal-red-400: hsl(0, 100%, 60%);
  --brutal-red-500: hsl(0, 100%, 50%);
  --brutal-red-600: hsl(0, 100%, 40%);
  --brutal-red-700: hsl(0, 100%, 30%);
  --brutal-red-800: hsl(0, 100%, 20%);
  --brutal-red-900: hsl(0, 100%, 10%);
  --brutal-red-950: hsl(0, 100%, 5%);
  
  --brutal-yellow-50: hsl(60, 100%, 97%);
  --brutal-yellow-100: hsl(60, 100%, 90%);
  --brutal-yellow-200: hsl(60, 100%, 80%);
  --brutal-yellow-300: hsl(60, 100%, 70%);
  --brutal-yellow-400: hsl(60, 100%, 60%);
  --brutal-yellow-500: hsl(60, 100%, 50%);
  --brutal-yellow-600: hsl(60, 100%, 40%);
  --brutal-yellow-700: hsl(60, 100%, 30%);
  --brutal-yellow-800: hsl(60, 100%, 20%);
  --brutal-yellow-900: hsl(60, 100%, 10%);
  --brutal-yellow-950: hsl(60, 100%, 5%);
  
  --brutal-blue-50: hsl(220, 100%, 97%);
  --brutal-blue-100: hsl(220, 100%, 90%);
  --brutal-blue-200: hsl(220, 100%, 80%);
  --brutal-blue-300: hsl(220, 100%, 70%);
  --brutal-blue-400: hsl(220, 100%, 60%);
  --brutal-blue-500: hsl(220, 100%, 50%);
  --brutal-blue-600: hsl(220, 100%, 40%);
  --brutal-blue-700: hsl(220, 100%, 30%);
  --brutal-blue-800: hsl(220, 100%, 20%);
  --brutal-blue-900: hsl(220, 100%, 10%);
  --brutal-blue-950: hsl(220, 100%, 5%);

  /* ═══ FLUID TYPOGRAPHY ═══ */
  --text-xs: clamp(0.625rem, 0.5rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.75rem, 0.625rem + 0.3vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.75rem + 0.35vw, 1rem);
  --text-lg: clamp(1rem, 0.875rem + 0.4vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.25rem + 0.75vw, 1.875rem);
  --text-4xl: clamp(1.875rem, 1.5rem + 1vw, 2.25rem);
  --text-5xl: clamp(2.25rem, 1.875rem + 1.25vw, 3rem);
  --text-6xl: clamp(3rem, 2.25rem + 1.5vw, 3.75rem);
  --text-7xl: clamp(3.75rem, 3rem + 2vw, 4.5rem);
  --text-8xl: clamp(4.5rem, 3.75rem + 2.5vw, 6rem);
  --text-9xl: clamp(6rem, 4.5rem + 3vw, 8rem);

  /* ═══ SPACING SCALE ═══ */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  --space-44: 11rem;
  --space-48: 12rem;
  --space-52: 13rem;
  --space-56: 14rem;
  --space-60: 15rem;
  --space-64: 16rem;
  --space-72: 18rem;
  --space-80: 20rem;
  --space-96: 24rem;

  /* ═══ Z-INDEX LAYERS ═══ */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal-backdrop: 500;
  --z-modal: 600;
  --z-popover: 700;
  --z-tooltip: 800;
  --z-notification: 900;
  --z-maximum: 9999;

  /* ═══ SHADOWS ═══ */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;
  
  /* ═══ GLASSMORPHISM ═══ */
  --glass-blur-sm: blur(4px);
  --glass-blur-md: blur(8px);
  --glass-blur-lg: blur(12px);
  --glass-blur-xl: blur(16px);
  --glass-blur-2xl: blur(24px);
  
  /* ═══ BORDER RADIUS ═══ */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ═══ TRANSITIONS ═══ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 0;
  line-height: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES - DISPLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.contents { display: contents; }
.hidden { display: none; }

/* ═══ FLEXBOX UTILITIES ═══ */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.gap-0 { gap: var(--space-0); }
.gap-px { gap: var(--space-px); }
.gap-0-5 { gap: var(--space-0-5); }
.gap-1 { gap: var(--space-1); }
.gap-1-5 { gap: var(--space-1-5); }
.gap-2 { gap: var(--space-2); }
.gap-2-5 { gap: var(--space-2-5); }
.gap-3 { gap: var(--space-3); }
.gap-3-5 { gap: var(--space-3-5); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }
.gap-9 { gap: var(--space-9); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-14 { gap: var(--space-14); }
.gap-16 { gap: var(--space-16); }
.gap-20 { gap: var(--space-20); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }

/* ═══ GRID UTILITIES ═══ */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════════════════════════════════
   SPACING - MARGIN & PADDING
   ═══════════════════════════════════════════════════════════════════════════ */

.m-0 { margin: var(--space-0); }
.m-px { margin: var(--space-px); }
.m-0-5 { margin: var(--space-0-5); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.m-20 { margin: var(--space-20); }
.m-24 { margin: var(--space-24); }
.m-32 { margin: var(--space-32); }
.m-auto { margin: auto; }

.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
.mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); }
.mx-24 { margin-left: var(--space-24); margin-right: var(--space-24); }
.mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
.my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); }
.my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); }
.my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }

.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-8 { margin-left: var(--space-8); }
.ml-10 { margin-left: var(--space-10); }
.ml-12 { margin-left: var(--space-12); }
.ml-16 { margin-left: var(--space-16); }
.ml-20 { margin-left: var(--space-20); }
.ml-24 { margin-left: var(--space-24); }
.ml-32 { margin-left: var(--space-32); }

.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-8 { margin-right: var(--space-8); }
.mr-10 { margin-right: var(--space-10); }
.mr-12 { margin-right: var(--space-12); }
.mr-16 { margin-right: var(--space-16); }
.mr-20 { margin-right: var(--space-20); }
.mr-24 { margin-right: var(--space-24); }
.mr-32 { margin-right: var(--space-32); }

.p-0 { padding: var(--space-0); }
.p-px { padding: var(--space-px); }
.p-0-5 { padding: var(--space-0-5); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }
.p-32 { padding: var(--space-32); }

.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
.px-32 { padding-left: var(--space-32); padding-right: var(--space-32); }

.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }

.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }
.pt-24 { padding-top: var(--space-24); }
.pt-32 { padding-top: var(--space-32); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-24 { padding-bottom: var(--space-24); }
.pb-32 { padding-bottom: var(--space-32); }

.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pl-8 { padding-left: var(--space-8); }
.pl-10 { padding-left: var(--space-10); }
.pl-12 { padding-left: var(--space-12); }
.pl-16 { padding-left: var(--space-16); }
.pl-20 { padding-left: var(--space-20); }
.pl-24 { padding-left: var(--space-24); }
.pl-32 { padding-left: var(--space-32); }

.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }
.pr-10 { padding-right: var(--space-10); }
.pr-12 { padding-right: var(--space-12); }
.pr-16 { padding-right: var(--space-16); }
.pr-20 { padding-right: var(--space-20); }
.pr-24 { padding-right: var(--space-24); }
.pr-32 { padding-right: var(--space-32); }

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }
.text-7xl { font-size: var(--text-7xl); }
.text-8xl { font-size: var(--text-8xl); }
.text-9xl { font-size: var(--text-9xl); }

.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

.italic { font-style: italic; }
.not-italic { font-style: normal; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* ═══════════════════════════════════════════════════════════════════════════
   BACKGROUND COLORS - NEON CYBER
   ═══════════════════════════════════════════════════════════════════════════ */

.bg-neon-purple-50 { background-color: var(--neon-purple-50); }
.bg-neon-purple-100 { background-color: var(--neon-purple-100); }
.bg-neon-purple-200 { background-color: var(--neon-purple-200); }
.bg-neon-purple-300 { background-color: var(--neon-purple-300); }
.bg-neon-purple-400 { background-color: var(--neon-purple-400); }
.bg-neon-purple-500 { background-color: var(--neon-purple-500); }
.bg-neon-purple-600 { background-color: var(--neon-purple-600); }
.bg-neon-purple-700 { background-color: var(--neon-purple-700); }
.bg-neon-purple-800 { background-color: var(--neon-purple-800); }
.bg-neon-purple-900 { background-color: var(--neon-purple-900); }
.bg-neon-purple-950 { background-color: var(--neon-purple-950); }

.bg-neon-pink-50 { background-color: var(--neon-pink-50); }
.bg-neon-pink-100 { background-color: var(--neon-pink-100); }
.bg-neon-pink-200 { background-color: var(--neon-pink-200); }
.bg-neon-pink-300 { background-color: var(--neon-pink-300); }
.bg-neon-pink-400 { background-color: var(--neon-pink-400); }
.bg-neon-pink-500 { background-color: var(--neon-pink-500); }
.bg-neon-pink-600 { background-color: var(--neon-pink-600); }
.bg-neon-pink-700 { background-color: var(--neon-pink-700); }
.bg-neon-pink-800 { background-color: var(--neon-pink-800); }
.bg-neon-pink-900 { background-color: var(--neon-pink-900); }
.bg-neon-pink-950 { background-color: var(--neon-pink-950); }

.bg-neon-cyan-50 { background-color: var(--neon-cyan-50); }
.bg-neon-cyan-100 { background-color: var(--neon-cyan-100); }
.bg-neon-cyan-200 { background-color: var(--neon-cyan-200); }
.bg-neon-cyan-300 { background-color: var(--neon-cyan-300); }
.bg-neon-cyan-400 { background-color: var(--neon-cyan-400); }
.bg-neon-cyan-500 { background-color: var(--neon-cyan-500); }
.bg-neon-cyan-600 { background-color: var(--neon-cyan-600); }
.bg-neon-cyan-700 { background-color: var(--neon-cyan-700); }
.bg-neon-cyan-800 { background-color: var(--neon-cyan-800); }
.bg-neon-cyan-900 { background-color: var(--neon-cyan-900); }
.bg-neon-cyan-950 { background-color: var(--neon-cyan-950); }

.bg-neon-lime-50 { background-color: var(--neon-lime-50); }
.bg-neon-lime-100 { background-color: var(--neon-lime-100); }
.bg-neon-lime-200 { background-color: var(--neon-lime-200); }
.bg-neon-lime-300 { background-color: var(--neon-lime-300); }
.bg-neon-lime-400 { background-color: var(--neon-lime-400); }
.bg-neon-lime-500 { background-color: var(--neon-lime-500); }
.bg-neon-lime-600 { background-color: var(--neon-lime-600); }
.bg-neon-lime-700 { background-color: var(--neon-lime-700); }
.bg-neon-lime-800 { background-color: var(--neon-lime-800); }
.bg-neon-lime-900 { background-color: var(--neon-lime-900); }
.bg-neon-lime-950 { background-color: var(--neon-lime-950); }

.bg-neon-orange-50 { background-color: var(--neon-orange-50); }
.bg-neon-orange-100 { background-color: var(--neon-orange-100); }
.bg-neon-orange-200 { background-color: var(--neon-orange-200); }
.bg-neon-orange-300 { background-color: var(--neon-orange-300); }
.bg-neon-orange-400 { background-color: var(--neon-orange-400); }
.bg-neon-orange-500 { background-color: var(--neon-orange-500); }
.bg-neon-orange-600 { background-color: var(--neon-orange-600); }
.bg-neon-orange-700 { background-color: var(--neon-orange-700); }
.bg-neon-orange-800 { background-color: var(--neon-orange-800); }
.bg-neon-orange-900 { background-color: var(--neon-orange-900); }
.bg-neon-orange-950 { background-color: var(--neon-orange-950); }

/* ═══ TEXT COLORS - NEON CYBER ═══ */
.text-neon-purple-50 { color: var(--neon-purple-50); }
.text-neon-purple-100 { color: var(--neon-purple-100); }
.text-neon-purple-200 { color: var(--neon-purple-200); }
.text-neon-purple-300 { color: var(--neon-purple-300); }
.text-neon-purple-400 { color: var(--neon-purple-400); }
.text-neon-purple-500 { color: var(--neon-purple-500); }
.text-neon-purple-600 { color: var(--neon-purple-600); }
.text-neon-purple-700 { color: var(--neon-purple-700); }
.text-neon-purple-800 { color: var(--neon-purple-800); }
.text-neon-purple-900 { color: var(--neon-purple-900); }
.text-neon-purple-950 { color: var(--neon-purple-950); }

.text-neon-pink-50 { color: var(--neon-pink-50); }
.text-neon-pink-100 { color: var(--neon-pink-100); }
.text-neon-pink-200 { color: var(--neon-pink-200); }
.text-neon-pink-300 { color: var(--neon-pink-300); }
.text-neon-pink-400 { color: var(--neon-pink-400); }
.text-neon-pink-500 { color: var(--neon-pink-500); }
.text-neon-pink-600 { color: var(--neon-pink-600); }
.text-neon-pink-700 { color: var(--neon-pink-700); }
.text-neon-pink-800 { color: var(--neon-pink-800); }
.text-neon-pink-900 { color: var(--neon-pink-900); }
.text-neon-pink-950 { color: var(--neon-pink-950); }

.text-neon-cyan-50 { color: var(--neon-cyan-50); }
.text-neon-cyan-100 { color: var(--neon-cyan-100); }
.text-neon-cyan-200 { color: var(--neon-cyan-200); }
.text-neon-cyan-300 { color: var(--neon-cyan-300); }
.text-neon-cyan-400 { color: var(--neon-cyan-400); }
.text-neon-cyan-500 { color: var(--neon-cyan-500); }
.text-neon-cyan-600 { color: var(--neon-cyan-600); }
.text-neon-cyan-700 { color: var(--neon-cyan-700); }
.text-neon-cyan-800 { color: var(--neon-cyan-800); }
.text-neon-cyan-900 { color: var(--neon-cyan-900); }
.text-neon-cyan-950 { color: var(--neon-cyan-950); }

.text-neon-lime-50 { color: var(--neon-lime-50); }
.text-neon-lime-100 { color: var(--neon-lime-100); }
.text-neon-lime-200 { color: var(--neon-lime-200); }
.text-neon-lime-300 { color: var(--neon-lime-300); }
.text-neon-lime-400 { color: var(--neon-lime-400); }
.text-neon-lime-500 { color: var(--neon-lime-500); }
.text-neon-lime-600 { color: var(--neon-lime-600); }
.text-neon-lime-700 { color: var(--neon-lime-700); }
.text-neon-lime-800 { color: var(--neon-lime-800); }
.text-neon-lime-900 { color: var(--neon-lime-900); }
.text-neon-lime-950 { color: var(--neon-lime-950); }

.text-neon-orange-50 { color: var(--neon-orange-50); }
.text-neon-orange-100 { color: var(--neon-orange-100); }
.text-neon-orange-200 { color: var(--neon-orange-200); }
.text-neon-orange-300 { color: var(--neon-orange-300); }
.text-neon-orange-400 { color: var(--neon-orange-400); }
.text-neon-orange-500 { color: var(--neon-orange-500); }
.text-neon-orange-600 { color: var(--neon-orange-600); }
.text-neon-orange-700 { color: var(--neon-orange-700); }
.text-neon-orange-800 { color: var(--neon-orange-800); }
.text-neon-orange-900 { color: var(--neon-orange-900); }
.text-neon-orange-950 { color: var(--neon-orange-950); }

/* ═══ PASTEL PALETTE ═══ */
.bg-pastel-rose-50 { background-color: var(--pastel-rose-50); }
.bg-pastel-rose-100 { background-color: var(--pastel-rose-100); }
.bg-pastel-rose-200 { background-color: var(--pastel-rose-200); }
.bg-pastel-rose-300 { background-color: var(--pastel-rose-300); }
.bg-pastel-rose-400 { background-color: var(--pastel-rose-400); }
.bg-pastel-rose-500 { background-color: var(--pastel-rose-500); }
.bg-pastel-rose-600 { background-color: var(--pastel-rose-600); }
.bg-pastel-rose-700 { background-color: var(--pastel-rose-700); }
.bg-pastel-rose-800 { background-color: var(--pastel-rose-800); }
.bg-pastel-rose-900 { background-color: var(--pastel-rose-900); }
.bg-pastel-rose-950 { background-color: var(--pastel-rose-950); }

.bg-pastel-lavender-50 { background-color: var(--pastel-lavender-50); }
.bg-pastel-lavender-100 { background-color: var(--pastel-lavender-100); }
.bg-pastel-lavender-200 { background-color: var(--pastel-lavender-200); }
.bg-pastel-lavender-300 { background-color: var(--pastel-lavender-300); }
.bg-pastel-lavender-400 { background-color: var(--pastel-lavender-400); }
.bg-pastel-lavender-500 { background-color: var(--pastel-lavender-500); }
.bg-pastel-lavender-600 { background-color: var(--pastel-lavender-600); }
.bg-pastel-lavender-700 { background-color: var(--pastel-lavender-700); }
.bg-pastel-lavender-800 { background-color: var(--pastel-lavender-800); }
.bg-pastel-lavender-900 { background-color: var(--pastel-lavender-900); }
.bg-pastel-lavender-950 { background-color: var(--pastel-lavender-950); }

.bg-pastel-mint-50 { background-color: var(--pastel-mint-50); }
.bg-pastel-mint-100 { background-color: var(--pastel-mint-100); }
.bg-pastel-mint-200 { background-color: var(--pastel-mint-200); }
.bg-pastel-mint-300 { background-color: var(--pastel-mint-300); }
.bg-pastel-mint-400 { background-color: var(--pastel-mint-400); }
.bg-pastel-mint-500 { background-color: var(--pastel-mint-500); }
.bg-pastel-mint-600 { background-color: var(--pastel-mint-600); }
.bg-pastel-mint-700 { background-color: var(--pastel-mint-700); }
.bg-pastel-mint-800 { background-color: var(--pastel-mint-800); }
.bg-pastel-mint-900 { background-color: var(--pastel-mint-900); }
.bg-pastel-mint-950 { background-color: var(--pastel-mint-950); }

.bg-pastel-peach-50 { background-color: var(--pastel-peach-50); }
.bg-pastel-peach-100 { background-color: var(--pastel-peach-100); }
.bg-pastel-peach-200 { background-color: var(--pastel-peach-200); }
.bg-pastel-peach-300 { background-color: var(--pastel-peach-300); }
.bg-pastel-peach-400 { background-color: var(--pastel-peach-400); }
.bg-pastel-peach-500 { background-color: var(--pastel-peach-500); }
.bg-pastel-peach-600 { background-color: var(--pastel-peach-600); }
.bg-pastel-peach-700 { background-color: var(--pastel-peach-700); }
.bg-pastel-peach-800 { background-color: var(--pastel-peach-800); }
.bg-pastel-peach-900 { background-color: var(--pastel-peach-900); }
.bg-pastel-peach-950 { background-color: var(--pastel-peach-950); }

.bg-pastel-sky-50 { background-color: var(--pastel-sky-50); }
.bg-pastel-sky-100 { background-color: var(--pastel-sky-100); }
.bg-pastel-sky-200 { background-color: var(--pastel-sky-200); }
.bg-pastel-sky-300 { background-color: var(--pastel-sky-300); }
.bg-pastel-sky-400 { background-color: var(--pastel-sky-400); }
.bg-pastel-sky-500 { background-color: var(--pastel-sky-500); }
.bg-pastel-sky-600 { background-color: var(--pastel-sky-600); }
.bg-pastel-sky-700 { background-color: var(--pastel-sky-700); }
.bg-pastel-sky-800 { background-color: var(--pastel-sky-800); }
.bg-pastel-sky-900 { background-color: var(--pastel-sky-900); }
.bg-pastel-sky-950 { background-color: var(--pastel-sky-950); }

/* ═══ MONO PALETTE ═══ */
.bg-mono-white { background-color: var(--mono-white); }
.bg-mono-50 { background-color: var(--mono-50); }
.bg-mono-100 { background-color: var(--mono-100); }
.bg-mono-200 { background-color: var(--mono-200); }
.bg-mono-300 { background-color: var(--mono-300); }
.bg-mono-400 { background-color: var(--mono-400); }
.bg-mono-500 { background-color: var(--mono-500); }
.bg-mono-600 { background-color: var(--mono-600); }
.bg-mono-700 { background-color: var(--mono-700); }
.bg-mono-800 { background-color: var(--mono-800); }
.bg-mono-900 { background-color: var(--mono-900); }
.bg-mono-950 { background-color: var(--mono-950); }
.bg-mono-black { background-color: var(--mono-black); }

.text-mono-white { color: var(--mono-white); }
.text-mono-50 { color: var(--mono-50); }
.text-mono-100 { color: var(--mono-100); }
.text-mono-200 { color: var(--mono-200); }
.text-mono-300 { color: var(--mono-300); }
.text-mono-400 { color: var(--mono-400); }
.text-mono-500 { color: var(--mono-500); }
.text-mono-600 { color: var(--mono-600); }
.text-mono-700 { color: var(--mono-700); }
.text-mono-800 { color: var(--mono-800); }
.text-mono-900 { color: var(--mono-900); }
.text-mono-950 { color: var(--mono-950); }
.text-mono-black { color: var(--mono-black); }

/* ═══ NATURE PALETTE ═══ */
.bg-forest-50 { background-color: var(--forest-50); }
.bg-forest-100 { background-color: var(--forest-100); }
.bg-forest-200 { background-color: var(--forest-200); }
.bg-forest-300 { background-color: var(--forest-300); }
.bg-forest-400 { background-color: var(--forest-400); }
.bg-forest-500 { background-color: var(--forest-500); }
.bg-forest-600 { background-color: var(--forest-600); }
.bg-forest-700 { background-color: var(--forest-700); }
.bg-forest-800 { background-color: var(--forest-800); }
.bg-forest-900 { background-color: var(--forest-900); }
.bg-forest-950 { background-color: var(--forest-950); }

.bg-ocean-50 { background-color: var(--ocean-50); }
.bg-ocean-100 { background-color: var(--ocean-100); }
.bg-ocean-200 { background-color: var(--ocean-200); }
.bg-ocean-300 { background-color: var(--ocean-300); }
.bg-ocean-400 { background-color: var(--ocean-400); }
.bg-ocean-500 { background-color: var(--ocean-500); }
.bg-ocean-600 { background-color: var(--ocean-600); }
.bg-ocean-700 { background-color: var(--ocean-700); }
.bg-ocean-800 { background-color: var(--ocean-800); }
.bg-ocean-900 { background-color: var(--ocean-900); }
.bg-ocean-950 { background-color: var(--ocean-950); }

.bg-earth-50 { background-color: var(--earth-50); }
.bg-earth-100 { background-color: var(--earth-100); }
.bg-earth-200 { background-color: var(--earth-200); }
.bg-earth-300 { background-color: var(--earth-300); }
.bg-earth-400 { background-color: var(--earth-400); }
.bg-earth-500 { background-color: var(--earth-500); }
.bg-earth-600 { background-color: var(--earth-600); }
.bg-earth-700 { background-color: var(--earth-700); }
.bg-earth-800 { background-color: var(--earth-800); }
.bg-earth-900 { background-color: var(--earth-900); }
.bg-earth-950 { background-color: var(--earth-950); }

.bg-sunset-50 { background-color: var(--sunset-50); }
.bg-sunset-100 { background-color: var(--sunset-100); }
.bg-sunset-200 { background-color: var(--sunset-200); }
.bg-sunset-300 { background-color: var(--sunset-300); }
.bg-sunset-400 { background-color: var(--sunset-400); }
.bg-sunset-500 { background-color: var(--sunset-500); }
.bg-sunset-600 { background-color: var(--sunset-600); }
.bg-sunset-700 { background-color: var(--sunset-700); }
.bg-sunset-800 { background-color: var(--sunset-800); }
.bg-sunset-900 { background-color: var(--sunset-900); }
.bg-sunset-950 { background-color: var(--sunset-950); }

/* ═══════════════════════════════════════════════════════════════════════════
   BORDERS
   ═══════════════════════════════════════════════════════════════════════════ */

.border { border-width: 1px; border-style: solid; }
.border-0 { border-width: 0; }
.border-2 { border-width: 2px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-8 { border-width: 8px; border-style: solid; }

.border-t { border-top-width: 1px; border-top-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }

.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-double { border-style: double; }
.border-none { border-style: none; }

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

.border-neon-purple-500 { border-color: var(--neon-purple-500); }
.border-neon-pink-500 { border-color: var(--neon-pink-500); }
.border-neon-cyan-500 { border-color: var(--neon-cyan-500); }
.border-mono-200 { border-color: var(--mono-200); }
.border-mono-300 { border-color: var(--mono-300); }
.border-mono-400 { border-color: var(--mono-400); }
.border-mono-500 { border-color: var(--mono-500); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHADOWS
   ═══════════════════════════════════════════════════════════════════════════ */

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none { box-shadow: var(--shadow-none); }

/* ═══════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM
   ═══════════════════════════════════════════════════════════════════════════ */

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-sm {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-lg {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-xl {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-xl);
  -webkit-backdrop-filter: var(--glass-blur-xl);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEUMORPHISM
   ═══════════════════════════════════════════════════════════════════════════ */

.neu-light {
  background: #e0e5ec;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
}

.neu-light-inset {
  background: #e0e5ec;
  box-shadow: inset 9px 9px 16px rgba(163, 177, 198, 0.6), inset -9px -9px 16px rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
}

.neu-dark {
  background: #2d3748;
  box-shadow: 9px 9px 16px rgba(0, 0, 0, 0.4), -9px -9px 16px rgba(60, 70, 85, 0.3);
  border-radius: var(--radius-lg);
}

.neu-dark-inset {
  background: #2d3748;
  box-shadow: inset 9px 9px 16px rgba(0, 0, 0, 0.4), inset -9px -9px 16px rgba(60, 70, 85, 0.3);
  border-radius: var(--radius-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   POSITIONING
   ═══════════════════════════════════════════════════════════════════════════ */

.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.top-1 { top: var(--space-1); }
.top-2 { top: var(--space-2); }
.top-4 { top: var(--space-4); }
.top-8 { top: var(--space-8); }
.top-16 { top: var(--space-16); }

.right-0 { right: 0; }
.right-1 { right: var(--space-1); }
.right-2 { right: var(--space-2); }
.right-4 { right: var(--space-4); }
.right-8 { right: var(--space-8); }
.right-16 { right: var(--space-16); }

.bottom-0 { bottom: 0; }
.bottom-1 { bottom: var(--space-1); }
.bottom-2 { bottom: var(--space-2); }
.bottom-4 { bottom: var(--space-4); }
.bottom-8 { bottom: var(--space-8); }
.bottom-16 { bottom: var(--space-16); }

.left-0 { left: 0; }
.left-1 { left: var(--space-1); }
.left-2 { left: var(--space-2); }
.left-4 { left: var(--space-4); }
.left-8 { left: var(--space-8); }
.left-16 { left: var(--space-16); }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* ═══ Z-INDEX ═══ */
.z-0 { z-index: var(--z-base); }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-overlay { z-index: var(--z-overlay); }
.z-modal { z-index: var(--z-modal); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-max { z-index: var(--z-maximum); }

/* ═══════════════════════════════════════════════════════════════════════════
   WIDTH & HEIGHT
   ═══════════════════════════════════════════════════════════════════════════ */

.w-0 { width: 0; }
.w-px { width: 1px; }
.w-auto { width: auto; }
.w-1 { width: var(--space-1); }
.w-2 { width: var(--space-2); }
.w-3 { width: var(--space-3); }
.w-4 { width: var(--space-4); }
.w-5 { width: var(--space-5); }
.w-6 { width: var(--space-6); }
.w-8 { width: var(--space-8); }
.w-10 { width: var(--space-10); }
.w-12 { width: var(--space-12); }
.w-16 { width: var(--space-16); }
.w-20 { width: var(--space-20); }
.w-24 { width: var(--space-24); }
.w-32 { width: var(--space-32); }
.w-40 { width: var(--space-40); }
.w-48 { width: var(--space-48); }
.w-56 { width: var(--space-56); }
.w-64 { width: var(--space-64); }
.w-72 { width: var(--space-72); }
.w-80 { width: var(--space-80); }
.w-96 { width: var(--space-96); }

.w-1-2 { width: 50%; }
.w-1-3 { width: 33.333333%; }
.w-2-3 { width: 66.666667%; }
.w-1-4 { width: 25%; }
.w-2-4 { width: 50%; }
.w-3-4 { width: 75%; }
.w-1-5 { width: 20%; }
.w-2-5 { width: 40%; }
.w-3-5 { width: 60%; }
.w-4-5 { width: 80%; }
.w-1-6 { width: 16.666667%; }
.w-5-6 { width: 83.333333%; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }

.h-0 { height: 0; }
.h-px { height: 1px; }
.h-auto { height: auto; }
.h-1 { height: var(--space-1); }
.h-2 { height: var(--space-2); }
.h-3 { height: var(--space-3); }
.h-4 { height: var(--space-4); }
.h-5 { height: var(--space-5); }
.h-6 { height: var(--space-6); }
.h-8 { height: var(--space-8); }
.h-10 { height: var(--space-10); }
.h-12 { height: var(--space-12); }
.h-16 { height: var(--space-16); }
.h-20 { height: var(--space-20); }
.h-24 { height: var(--space-24); }
.h-32 { height: var(--space-32); }
.h-40 { height: var(--space-40); }
.h-48 { height: var(--space-48); }
.h-56 { height: var(--space-56); }
.h-64 { height: var(--space-64); }
.h-72 { height: var(--space-72); }
.h-80 { height: var(--space-80); }
.h-96 { height: var(--space-96); }

.h-1-2 { height: 50%; }
.h-1-3 { height: 33.333333%; }
.h-2-3 { height: 66.666667%; }
.h-1-4 { height: 25%; }
.h-3-4 { height: 75%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }

.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }

.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ═══════════════════════════════════════════════════════════════════════════
   OVERFLOW
   ═══════════════════════════════════════════════════════════════════════════ */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSITIONS & ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.transition-none { transition: none; }
.transition-all { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
.transition-bounce { transition: all var(--transition-bounce); }

.transition-colors { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); }
.transition-opacity { transition: opacity var(--transition-base); }
.transition-transform { transition: transform var(--transition-base); }

/* ═══ TRANSFORM ═══ */
.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.transform-none { transform: none; }

.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; }
.scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5; }
.scale-75 { --tw-scale-x: 0.75; --tw-scale-y: 0.75; }
.scale-90 { --tw-scale-x: 0.9; --tw-scale-y: 0.9; }
.scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; }
.scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }
.scale-125 { --tw-scale-x: 1.25; --tw-scale-y: 1.25; }
.scale-150 { --tw-scale-x: 1.5; --tw-scale-y: 1.5; }

.rotate-0 { --tw-rotate: 0deg; }
.rotate-45 { --tw-rotate: 45deg; }
.rotate-90 { --tw-rotate: 90deg; }
.rotate-180 { --tw-rotate: 180deg; }
.rotate-270 { --tw-rotate: 270deg; }
.-rotate-45 { --tw-rotate: -45deg; }
.-rotate-90 { --tw-rotate: -90deg; }
.-rotate-180 { --tw-rotate: -180deg; }

/* ═══ HOVER STATES ═══ */
.hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.hover\:scale-110:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }
.hover\:shadow-2xl:hover { box-shadow: var(--shadow-2xl); }

/* ═══════════════════════════════════════════════════════════════════════════
   OPACITY
   ═══════════════════════════════════════════════════════════════════════════ */

.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   CURSOR
   ═══════════════════════════════════════════════════════════════════════════ */

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-lg);
}

.btn-neon {
  background: var(--neon-purple-500);
  color: white;
  box-shadow: 0 0 20px var(--neon-purple-500);
}

.btn-neon:hover {
  background: var(--neon-purple-600);
  box-shadow: 0 0 30px var(--neon-purple-500);
  transform: translateY(-2px);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-brutal {
  background: var(--brutal-yellow-500);
  color: black;
  border: 3px solid black;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 black;
}

.btn-brutal:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 black;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.card-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.card-neu {
  background: #e0e5ec;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.card-neon {
  background: var(--mono-900);
  border: 2px solid var(--neon-cyan-500);
  box-shadow: 0 0 20px var(--neon-cyan-500), inset 0 0 20px rgba(0, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: white;
}

.card-brutal {
  background: var(--brutal-yellow-500);
  border: 4px solid black;
  box-shadow: 8px 8px 0 black;
  padding: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: NAVBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: white;
  box-shadow: var(--shadow-sm);
}

.navbar-glass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-brutal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--brutal-red-500);
  border-bottom: 4px solid black;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: HERO SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16);
}

.hero-gradient {
  background: linear-gradient(135deg, var(--neon-purple-500), var(--neon-pink-500), var(--neon-cyan-500));
  color: white;
}

.hero-glass {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><rect fill="%23667eea" width="1000" height="1000"/></svg>');
  background-size: cover;
  position: relative;
}

.hero-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 375px) {
  .xs\:block { display: block; }
  .xs\:flex { display: flex; }
  .xs\:hidden { display: none; }
  .xs\:text-sm { font-size: var(--text-sm); }
  .xs\:p-2 { padding: var(--space-2); }
}

@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
  .sm\:hidden { display: none; }
  
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  
  .sm\:text-base { font-size: var(--text-base); }
  .sm\:text-lg { font-size: var(--text-lg); }
  .sm\:text-xl { font-size: var(--text-xl); }
  
  .sm\:p-4 { padding: var(--space-4); }
  .sm\:p-6 { padding: var(--space-6); }
  .sm\:m-4 { margin: var(--space-4); }
  
  .sm\:w-1-2 { width: 50%; }
  .sm\:w-full { width: 100%; }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:hidden { display: none; }
  
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  
  .md\:text-lg { font-size: var(--text-lg); }
  .md\:text-xl { font-size: var(--text-xl); }
  .md\:text-2xl { font-size: var(--text-2xl); }
  .md\:text-3xl { font-size: var(--text-3xl); }
  
  .md\:p-6 { padding: var(--space-6); }
  .md\:p-8 { padding: var(--space-8); }
  .md\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
  
  .md\:w-1-2 { width: 50%; }
  .md\:w-1-3 { width: 33.333333%; }
  .md\:w-2-3 { width: 66.666667%; }
}

@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:hidden { display: none; }
  
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
  
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  
  .lg\:text-xl { font-size: var(--text-xl); }
  .lg\:text-2xl { font-size: var(--text-2xl); }
  .lg\:text-3xl { font-size: var(--text-3xl); }
  .lg\:text-4xl { font-size: var(--text-4xl); }
  
  .lg\:p-8 { padding: var(--space-8); }
  .lg\:p-12 { padding: var(--space-12); }
  
  .lg\:w-1-3 { width: 33.333333%; }
  .lg\:w-1-4 { width: 25%; }
  .lg\:w-3-4 { width: 75%; }
}

@media (min-width: 1280px) {
  .xl\:block { display: block; }
  .xl\:flex { display: flex; }
  .xl\:grid { display: grid; }
  .xl\:hidden { display: none; }
  
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  
  .xl\:text-2xl { font-size: var(--text-2xl); }
  .xl\:text-3xl { font-size: var(--text-3xl); }
  .xl\:text-4xl { font-size: var(--text-4xl); }
  .xl\:text-5xl { font-size: var(--text-5xl); }
  
  .xl\:p-12 { padding: var(--space-12); }
  .xl\:p-16 { padding: var(--space-16); }
}

@media (min-width: 1536px) {
  .xxl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xxl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .xxl\:text-5xl { font-size: var(--text-5xl); }
  .xxl\:text-6xl { font-size: var(--text-6xl); }
  .xxl\:p-20 { padding: var(--space-20); }
}

@media (min-width: 1920px) {
  .ultra\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .ultra\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .ultra\:text-7xl { font-size: var(--text-7xl); }
  .ultra\:p-24 { padding: var(--space-24); }
}

@media (min-width: 2560px) {
  .uhd\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .uhd\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .uhd\:text-8xl { font-size: var(--text-8xl); }
  .uhd\:p-32 { padding: var(--space-32); }
}

@media (min-width: 3840px) {
  .k8\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .k8\:text-9xl { font-size: var(--text-9xl); }
  .k8\:p-40 { padding: var(--space-40); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes neonGlow {
  0%, 100% {
    text-shadow: 0 0 10px var(--neon-cyan-500), 0 0 20px var(--neon-cyan-500), 0 0 30px var(--neon-cyan-500);
  }
  50% {
    text-shadow: 0 0 20px var(--neon-pink-500), 0 0 30px var(--neon-pink-500), 0 0 40px var(--neon-pink-500);
  }
}

.animate-fadeIn { animation: fadeIn var(--transition-base); }
.animate-fadeOut { animation: fadeOut var(--transition-base); }
.animate-slideInUp { animation: slideInUp var(--transition-base); }
.animate-slideInDown { animation: slideInDown var(--transition-base); }
.animate-slideInLeft { animation: slideInLeft var(--transition-base); }
.animate-slideInRight { animation: slideInRight var(--transition-base); }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-neonGlow { animation: neonGlow 2s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES - ADVANCED
   ═══════════════════════════════════════════════════════════════════════════ */

.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-lg { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.grayscale { filter: grayscale(100%); }
.grayscale-0 { filter: grayscale(0); }
.blur-sm { filter: blur(4px); }
.blur-md { filter: blur(8px); }
.blur-lg { filter: blur(12px); }

.brightness-50 { filter: brightness(0.5); }
.brightness-75 { filter: brightness(0.75); }
.brightness-100 { filter: brightness(1); }
.brightness-125 { filter: brightness(1.25); }
.brightness-150 { filter: brightness(1.5); }

.contrast-50 { filter: contrast(0.5); }
.contrast-100 { filter: contrast(1); }
.contrast-125 { filter: contrast(1.25); }
.contrast-150 { filter: contrast(1.5); }

.saturate-0 { filter: saturate(0); }
.saturate-50 { filter: saturate(0.5); }
.saturate-100 { filter: saturate(1); }
.saturate-150 { filter: saturate(1.5); }
.saturate-200 { filter: saturate(2); }

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-auto { aspect-ratio: auto; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

.scroll-smooth { scroll-behavior: smooth; }

/* ═══ SCROLL SNAP ═══ */
.snap-x { scroll-snap-type: x mandatory; }
.snap-y { scroll-snap-type: y mandatory; }
.snap-both { scroll-snap-type: both mandatory; }
.snap-start { scroll-snap-align: start; }
.snap-center { scroll-snap-align: center; }
.snap-end { scroll-snap-align: end; }

/* ═══════════════════════════════════════════════════════════════════════════
   BRUTALIST COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.brutal-input {
  padding: var(--space-3);
  border: 3px solid black;
  background: white;
  font-weight: 600;
  outline: none;
}

.brutal-input:focus {
  box-shadow: 4px 4px 0 black;
  transform: translate(-2px, -2px);
}

.brutal-container {
  background: var(--brutal-yellow-500);
  border: 4px solid black;
  box-shadow: 12px 12px 0 black;
  padding: var(--space-8);
}

.brutal-heading {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-shadow: 3px 3px 0 black;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEON GLOW UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.glow-neon-purple {
  box-shadow: 0 0 10px var(--neon-purple-500), 0 0 20px var(--neon-purple-500), 0 0 30px var(--neon-purple-500);
}

.glow-neon-pink {
  box-shadow: 0 0 10px var(--neon-pink-500), 0 0 20px var(--neon-pink-500), 0 0 30px var(--neon-pink-500);
}

.glow-neon-cyan {
  box-shadow: 0 0 10px var(--neon-cyan-500), 0 0 20px var(--neon-cyan-500), 0 0 30px var(--neon-cyan-500);
}

.text-glow-neon-purple {
  text-shadow: 0 0 10px var(--neon-purple-500), 0 0 20px var(--neon-purple-500), 0 0 30px var(--neon-purple-500);
}

.text-glow-neon-pink {
  text-shadow: 0 0 10px var(--neon-pink-500), 0 0 20px var(--neon-pink-500), 0 0 30px var(--neon-pink-500);
}

.text-glow-neon-cyan {
  text-shadow: 0 0 10px var(--neon-cyan-500), 0 0 20px var(--neon-cyan-500), 0 0 30px var(--neon-cyan-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.bg-gradient-neon {
  background: linear-gradient(135deg, var(--neon-purple-500), var(--neon-pink-500), var(--neon-cyan-500));
}

.bg-gradient-pastel {
  background: linear-gradient(135deg, var(--pastel-lavender-300), var(--pastel-rose-300), var(--pastel-mint-300));
}

.bg-gradient-ocean {
  background: linear-gradient(135deg, var(--ocean-400), var(--ocean-600), var(--ocean-800));
}

.bg-gradient-sunset {
  background: linear-gradient(135deg, var(--sunset-300), var(--sunset-500), var(--sunset-700));
}

.bg-gradient-forest {
  background: linear-gradient(135deg, var(--forest-300), var(--forest-500), var(--forest-700));
}

.bg-gradient-radial-neon {
  background: radial-gradient(circle, var(--neon-purple-500), var(--neon-pink-500), var(--mono-900));
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADVANCED GRID LAYOUTS
   ═══════════════════════════════════════════════════════════════════════════ */

.grid-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  gap: var(--space-4);
}

.grid-dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

.grid-holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";
  min-height: 100vh;
}

.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-left { grid-area: left; }
.area-right { grid-area: right; }
.area-footer { grid-area: footer; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  backdrop-filter: blur(4px);
}

.modal {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-2xl);
  z-index: var(--z-modal);
  animation: slideInDown var(--transition-base);
}

.modal-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-2xl);
  z-index: var(--z-modal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: FORMS
   ═══════════════════════════════════════════════════════════════════════════ */

.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--mono-300);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: all var(--transition-base);
  outline: none;
}

.input:focus {
  border-color: var(--neon-cyan-500);
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1);
}

.input-glass {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: white;
  outline: none;
}

.input-glass::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input-glass:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--mono-400);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.toggle {
  width: 50px;
  height: 24px;
  background: var(--mono-300);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: all var(--transition-base);
}

.toggle::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all var(--transition-base);
}

.toggle.active {
  background: var(--neon-cyan-500);
}

.toggle.active::after {
  left: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: BADGES & PILLS
   ═══════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-md);
  background: var(--mono-200);
  color: var(--mono-800);
}

.badge-neon {
  background: var(--neon-purple-500);
  color: white;
  box-shadow: 0 0 10px var(--neon-purple-500);
}

.badge-pill {
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: TOOLTIPS
   ═══════════════════════════════════════════════════════════════════════════ */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  padding: var(--space-2) var(--space-3);
  background: var(--mono-900);
  color: white;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  transition: all var(--transition-base);
  z-index: var(--z-tooltip);
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  border: 5px solid transparent;
  border-top-color: var(--mono-900);
  opacity: 0;
  transition: all var(--transition-base);
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: PROGRESS BARS
   ═══════════════════════════════════════════════════════════════════════════ */

.progress {
  width: 100%;
  height: 8px;
  background: var(--mono-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--neon-cyan-500);
  transition: width var(--transition-slow);
}

.progress-neon {
  background: var(--mono-900);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.progress-neon .progress-bar {
  background: linear-gradient(90deg, var(--neon-purple-500), var(--neon-pink-500), var(--neon-cyan-500));
  box-shadow: 0 0 20px var(--neon-cyan-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: ALERTS
   ═══════════════════════════════════════════════════════════════════════════ */

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-bottom: var(--space-4);
}

.alert-success {
  background: hsl(140, 60%, 95%);
  border-color: var(--forest-500);
  color: var(--forest-800);
}

.alert-error {
  background: hsl(0, 100%, 95%);
  border-color: var(--brutal-red-500);
  color: var(--brutal-red-800);
}

.alert-warning {
  background: hsl(30, 100%, 95%);
  border-color: var(--neon-orange-500);
  color: var(--neon-orange-800);
}

.alert-info {
  background: hsl(200, 80%, 95%);
  border-color: var(--ocean-500);
  color: var(--ocean-800);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: BREADCRUMBS
   ═══════════════════════════════════════════════════════════════════════════ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb-item:not(:last-child)::after {
  content: '/';
  color: var(--mono-400);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.pagination {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.pagination-item {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--mono-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.pagination-item:hover {
  background: var(--mono-100);
}

.pagination-item.active {
  background: var(--neon-cyan-500);
  color: white;
  border-color: var(--neon-cyan-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  border-bottom: 2px solid var(--mono-200);
  gap: var(--space-4);
}

.tab {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-base);
  font-weight: 500;
}

.tab:hover {
  color: var(--neon-cyan-600);
}

.tab.active {
  border-bottom-color: var(--neon-cyan-500);
  color: var(--neon-cyan-600);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: ACCORDIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.accordion {
  border: 1px solid var(--mono-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--mono-200);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  padding: var(--space-4);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: all var(--transition-base);
}

.accordion-header:hover {
  background: var(--mono-50);
}

.accordion-content {
  padding: 0 var(--space-4);
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-base);
}

.accordion-item.active .accordion-content {
  padding: var(--space-4);
  max-height: 500px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: DROPDOWNS
   ═══════════════════════════════════════════════════════════════════════════ */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-2);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: var(--z-dropdown);
}

.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: all var(--transition-base);
}

.dropdown-item:hover {
  background: var(--mono-100);
}

.dropdown-divider {
  height: 1px;
  background: var(--mono-200);
  margin: var(--space-2) 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: SKELETON LOADERS
   ═══════════════════════════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(90deg, var(--mono-200) 25%, var(--mono-100) 50%, var(--mono-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-2);
}

.skeleton-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.skeleton-rect {
  width: 100%;
  height: 200px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT: SPINNERS
   ═══════════════════════════════════════════════════════════════════════════ */

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--mono-200);
  border-top-color: var(--neon-cyan-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-neon {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 255, 255, 0.2);
  border-top-color: var(--neon-cyan-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 20px var(--neon-cyan-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   END OF NAKSHORA CSS FRAMEWORK
   ═══════════════════════════════════════════════════════════════════════════ */