:root {
  /* Colors: Ultra-Premium Dark Mode Foundation */
  --color-bg-primary: #050505;
  --color-bg-secondary: #0A0A0A;
  --color-bg-tertiary: #111111;
  --color-bg-glass: rgba(20, 20, 20, 0.6);
  --color-bg-glass-hover: rgba(30, 30, 30, 0.8);
  
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A1A1AA; /* Zinc 400 */
  --color-text-tertiary: #71717A; /* Zinc 500 */
  
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  
  --color-accent-primary: #FFFFFF; /* High contrast minimalist accent */
  --color-accent-secondary: #3B82F6; /* Blue subtle gradient accent if needed */
  
  /* Typography Variables */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Fluid Spacing Scale (4px/8px baseline) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */
  --space-48: 12rem;   /* 192px */
  
  /* Easing */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Bouncy */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Apple-like */
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  
  /* Shadows & Glows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 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.3);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --glow-subtle: 0 0 20px rgba(255, 255, 255, 0.05);
  --glow-accent: 0 0 30px rgba(255, 255, 255, 0.15);
  
  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  
  /* Z-Index */
  --z-base: 1;
  --z-elevated: 10;
  --z-nav: 50;
  --z-modal: 100;
  --z-cursor: 9999;
}

/* Global Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  scroll-behavior: smooth; /* Base fallback, handled by JS later if needed */
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  background-color: var(--color-bg-primary);
}

::selection {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
}