:root {
  /* Color Palette - Urban Block Terracotta with Blueprint Cyan */
  --color-surface-0: #05070C;
  --color-surface-1: #0A0D12;
  --color-surface-2: #0F131C;
  --color-surface-3: #161D2B;
  --color-surface-4: #1E2636;
  
  --color-terracotta: #D4734A;
  --color-terracotta-dark: #B85C3A;
  --color-terracotta-light: #E8906E;
  
  --color-cyan: #2DD4BF;
  --color-cyan-dark: #14B8A6;
  --color-cyan-light: #5EEAD4;
  
  --color-text-primary: #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-tertiary: #9CA3AF;
  
  --color-disabled-bg: #2A2A2A;
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  
  --font-size-base: clamp(15px, 1.5vw, 17px);
  --font-size-sm: clamp(14px, 1.3vw, 15px);
  --font-size-lg: clamp(17px, 1.7vw, 19px);
  --font-size-xl: clamp(20px, 2.2vw, 24px);
  --font-size-2xl: clamp(28px, 3.5vw, 36px);
  --font-size-3xl: clamp(36px, 5vw, 56px);
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;
  
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  
  /* Spacing */
  --spacing-xs: clamp(8px, 1vw, 12px);
  --spacing-sm: clamp(12px, 1.5vw, 16px);
  --spacing-md: clamp(16px, 2vw, 24px);
  --spacing-lg: clamp(24px, 3vw, 32px);
  --spacing-xl: clamp(32px, 4vw, 48px);
  --spacing-2xl: clamp(48px, 6vw, 64px);
  --spacing-3xl: clamp(64px, 8vw, 96px);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  
  --shadow-glow-cyan: 0 0 20px rgba(45, 212, 191, 0.3);
  --shadow-glow-terracotta: 0 0 20px rgba(212, 115, 74, 0.3);
  
  /* Grid */
  --grid-unit: 8px;
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index */
  --z-header: 100;
  --z-floating-cta: 90;
  --z-overlay: 80;
}