/* VERVE CRM — Brand Configuration System
   Source of truth for all brand values.
   Every page imports this file. No hardcoded values elsewhere.
   QA automated tests verify compliance. */

:root {
  /* Brand Colors */
  --brand-purple: #5B5B9A;
  --brand-steel-blue: #5F7CA8;
  --brand-dark-slate: #0F172A;
  --brand-light-gray: #E5E7EB;
  --brand-white: #FFFFFF;
  --brand-black: #000000;

  /* RGB variants for opacity/glow usage */
  --brand-purple-rgb: 91, 91, 154;
  --brand-steel-blue-rgb: 95, 124, 168;
  --brand-dark-slate-rgb: 15, 23, 42;

  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-weight-light: 300;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Brand Effects */
  --glow-purple: 0 0 20px rgba(var(--brand-purple-rgb), 0.15);
  --glow-purple-hover: 0 0 20px rgba(var(--brand-purple-rgb), 0.4);
  --glow-purple-intense: 0 0 80px rgba(var(--brand-purple-rgb), 0.15);
  --glow-text-purple: 0 0 10px rgba(var(--brand-purple-rgb), 0.3);

  /* UI */
  --border-radius: 4px;
  --transition-default: 300ms ease;
}

/* Reduced motion: disable all animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   HERO ENTRANCE — GPU-accelerated transform animations
   Uses CSS custom properties driven by JS for smoothness.
   translate3d() forces a compositor layer = no main-thread layout.
   !important overrides Tailwind CDN's transform composition system.
   ============================================================ */
.hero-overline,
.hero-sub,
.hero-ctas,
.hero-line-inner {
  transform: translate3d(0, var(--anim-y, 0), 0) !important;
  opacity: var(--anim-o, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Once animation completes, JS removes will-change for memory cleanup */
.hero-overline.anim-done,
.hero-sub.anim-done,
.hero-ctas.anim-done,
.hero-line-inner.anim-done {
  will-change: auto;
}