/* Design Tokens - CSS Custom Properties */
:root {
  /* WePro Brand Colors */
  --wepro-purple: #8427D6;
  --wepro-pink: #d010c4;
  --wepro-blue: #361C73;
  --wepro-text-blue: #1b1b37;
  --wepro-off-white: #FCFCFD;
  --wepro-black: #303030;
  --wepro-hover: #c694ff;
  --wepro-purple-2: #A259FF;
  --wepro-medium-purple: #D1ACFF;

  /* Grays */
  --wepro-gray: #EEF2F6;
  --wepro-gray-2: #F2F2F2;
  --wepro-gray-50: #E7E7E6;
  --wepro-gray-100: #c2c2c1;
  --wepro-gray-200: #9a9a98;
  --wepro-gray-400: #535350;
  --wepro-gray-900: #161613;

  /* Gradient */
  --wepro-gradient: linear-gradient(90deg, #5f1695, #6f1bac, #8427d6, #9d2fee, #b83df4, #9f25c4, #9234a4);

  /* Semantic Colors */
  --color-bg: #F2F2F2;
  --color-bg-white: #ffffff;
  --color-text: #1b1b37;
  --color-text-muted: #6b7280;
  --color-text-light: #9ca3af;
  --color-border: #e5e7eb;
  --color-success: #22c55e;
  --color-error: #ef4444;

  /* Apple-inspired tokens */
  --apple-blur: blur(20px);
  --apple-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --apple-shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.16);
  --apple-radius: 16px;
  --apple-radius-lg: 24px;

  /* Transitions */
  --transition-base: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-apple: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Nav dimensions */
  --nav-height: 50px;
}