/* css/variables.css */
:root {
  --black: #080808;
  --graphite: #111111;
  --dark-mid: #1a1a1a;
  --grey-structural: #333333;
  --grey-text: #666666;
  --grey-light: #999999;
  --white: #f2f2f2;
  --accent: #e8f4ff;
  --accent-active: #b8d9ff;
  --line-subtle: rgba(232, 244, 255, 0.06);
  
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 140px;
  --space-xxl: 180px;
  
  --nav-height: 56px;
  --max-width: 1440px;
  --content-padding: 8vw;
  
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.25s;
  --duration-mid: 0.55s;
  --duration-slow: 0.9s;

  /* Breakpoints for media queries reference */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
}