:root {
  /* ========================================
     COLOR PALETTE - TYPOGRAPHIC BRUTALISM
     ======================================== */
  
  /* Primary Colors - ACID RADICAL (NO PURPLE!) */
  --color-primary-acid: #00FF7F;      /* Acid Green - primary brand */
  --color-primary-signal: #FF4500;    /* Signal Orange - secondary */
  --color-primary-deep: #000000;      /* Deep Black - base */
  --color-accent-white: #FFFFFF;      /* Pure White - contrast */
  
  /* Gradients - ANTI-CLICHÉ */
  --gradient-primary: linear-gradient(135deg, #00FF7F 0%, #FF4500 100%);
  --gradient-secondary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  --gradient-accent: linear-gradient(90deg, #00FF7F 0%, #00D9FF 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(0, 255, 127, 0.05) 0%, rgba(255, 69, 0, 0.05) 100%);
  
  /* Dark Mode Colors */
  --color-bg-primary: hsl(230, 25%, 8%);
  --color-bg-secondary: hsl(230, 20%, 12%);
  --color-bg-tertiary: hsl(230, 18%, 16%);
  --color-bg-elevated: hsl(230, 20%, 18%);
  
  /* Text Colors */
  --color-text-primary: hsl(0, 0%, 95%);
  --color-text-secondary: hsl(0, 0%, 70%);
  --color-text-tertiary: hsl(0, 0%, 50%);
  --color-text-inverse: hsl(230, 25%, 8%);
  
  /* Border & Divider */
  --color-border: hsla(0, 0%, 100%, 0.1);
  --color-border-hover: hsla(0, 0%, 100%, 0.2);
  
  /* Status Colors */
  --color-success: hsl(145, 65%, 55%);
  --color-warning: hsl(40, 90%, 60%);
  --color-error: hsl(5, 75%, 60%);
  --color-info: hsl(200, 85%, 60%);
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  
  /* Font Sizes - Fluid Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
  --text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
  
  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* ========================================
     SPACING SYSTEM
     ======================================== */
  
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  
  /* ========================================
     LAYOUT
     ======================================== */
  
  /* Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-fixed: 1000;
  --z-modal: 10000;
  --z-popover: 100000;
  --z-tooltip: 1000000;
  
  /* ========================================
     BORDERS & RADIUS - EXTREME GEOMETRY
     ======================================== */
  
  /* Geometric Extremism: 0px OR 32px+ (NO MIDDLE ZONE 4-8px!) */
  --radius-zero: 0px;          /* Sharp Tech - use for brutalism */
  --radius-brutal: 32px;       /* Extreme Soft - use for contrast */
  --radius-full: 9999px;       /* Pills */
  
  --border-width: 1px;
  --border-width-brutal: 4px;  /* Hard borders */
  --border-width-thick: 8px;   /* Ultra thick */
  
  /* ========================================
     SHADOWS & ELEVATION - HARD OR NONE
     ======================================== */
  
  /* Hard Shadows (No soft blur!) */
  --shadow-hard: 8px 8px 0 rgba(0, 255, 127, 0.8);
  --shadow-hard-orange: 8px 8px 0 rgba(255, 69, 0, 0.8);
  --shadow-brutal: 12px 12px 0 rgba(0, 0, 0, 0.9);
  --shadow-none: none;
  
  /* Legacy soft shadows (avoid using) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* ========================================
     ANIMATIONS & TRANSITIONS - BRUTALIST MOTION
     ======================================== */
  
  /* Durations */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-brutal: 800ms;
  
  /* Easing Functions - AGGRESSIVE SPRING PHYSICS */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);      /* Bouncy */
  --ease-brutal: cubic-bezier(0.34, 1.56, 0.64, 1);           /* AGGRESSIVE spring */
  --ease-snap: cubic-bezier(0.86, 0, 0.07, 1);                /* Snap motion */
  
  /* Transitions */
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-brutal: all var(--duration-brutal) var(--ease-brutal);
  
  /* ========================================
     EFFECTS
     ======================================== */
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --backdrop-blur: blur(12px);
  
  /* Opacity Levels */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;
  --opacity-subtle: 0.6;
}