/* ============================================
   Bex Marketing — Design Tokens
   Extracted from live brand (see brand-spec.md)
   ============================================ */

:root {
  /* Color — real brand palette, extracted from live CSS */
  --ink: #231B3B;          /* primary text, matches logo */
  --ink-soft: #483778;     /* secondary text / headings on light */
  --accent: #8051FF;       /* bright purple — CTAs, highlights */
  --accent-deep: #4B3CCD;  /* indigo — labels, links */
  --tint: #C7C1D9;         /* light lavender — subtle surfaces */
  --muted: #6F658C;        /* muted purple-grey — tertiary text, borders */
  --paper: #FFFFFF;        /* primary background */
  --paper-warm: #FAF9FC;   /* off-white surface variation */
  --line: #E4E0EC;         /* hairline borders */

  /* Typography */
  --font-display: 'Familjen Grotesk', sans-serif;
  --font-body: 'Familjen Grotesk', sans-serif;

  --text-display: clamp(2.75rem, 6vw, 6rem);
  --text-h2: clamp(2rem, 3.5vw, 3.25rem);
  --text-h3: clamp(1.375rem, 2vw, 1.75rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;

  /* Spacing — 8pt base */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.25rem;
  --space-6: 2.5rem;
  --space-8: 3.25rem;
  --space-12: 4.5rem;
  --space-16: 6rem;
  --space-20: 7rem;

  --page-max: 1440px;
  --page-pad: clamp(1.5rem, 5vw, 5rem);

  /* Radius — minimal/sharp, editorial */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}