/* ==========================================================================
   ThreeStepTech — Shared Design Tokens
   All sites import this file to stay in sync with the brand.
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #BFF549;
  --color-primary-rgb: 191, 245, 73;
  --color-complementary: #A855F7;
  --color-complementary-rgb: 168, 85, 247;
  --color-background: #000000;
  --color-muted: #99A1AF;
  --color-text: #FFFFFF;
  --color-text-secondary: #CCCCCC;

  /* Glassmorphism */
  --glass-bg: rgba(26, 10, 46, 0.4);
  --glass-bg-light: rgba(26, 10, 46, 0.3);
  --glass-bg-button: rgba(40, 40, 40, 0.6);
  --glass-border: rgba(168, 85, 247, 0.15);
  --glass-border-hover: rgba(168, 85, 247, 0.4);
  --glass-blur: blur(20px);
  --glass-blur-light: blur(15px);
  --glass-blur-button: blur(10px);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-h1: clamp(3rem, 8vw, 6rem);
  --font-size-h2: clamp(2rem, 5vw, 3rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.5rem);
  --font-size-body: clamp(1rem, 1.5vw, 1.25rem);
  --font-size-small: 0.875rem;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 1);
  --spacing-sm: calc(var(--spacing-unit) * 2);
  --spacing-md: calc(var(--spacing-unit) * 3);
  --spacing-lg: calc(var(--spacing-unit) * 5);
  --spacing-section: calc(var(--spacing-unit) * 6.25);
  --spacing-xl: calc(var(--spacing-unit) * 8);
  --spacing-2xl: calc(var(--spacing-unit) * 12);

  /* UI */
  --border-radius-sharp: 0px;
  --border-radius-pill: 9999px;
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Glow Effects */
  --glow-primary: 0 0 60px -15px rgba(var(--color-primary-rgb), 0.6);
  --glow-primary-intense: 0 0 80px -10px rgba(var(--color-primary-rgb), 0.8);
  --glow-complementary: 0 0 60px -15px rgba(var(--color-complementary-rgb), 0.6);
  --glow-complementary-intense: 0 0 80px -10px rgba(var(--color-complementary-rgb), 0.8);

  /* Header */
  --header-height: 80px;
}