/* ============================================================
   Synergy 2027 registration page: local token overrides.
   Loaded after co-mex-tokens.css. Only values that do not exist
   in Co-mex live here; each one is listed in README.md.
   ============================================================ */

:root {
  /* Nav. Co-mex sets 110px (a 100px logo); a registration page needs the
     hero above the fold, so the bar is compact on every width. */
  --syn-nav-h-page: 72px;
  --syn-logo-h: 28px;
  --syn-logo-h-sm: 20px;

  /* Hero container is wider than --syn-max so the split has room. */
  --syn-max-hero: 1280px;

  /* Hero height: fluid, floored for small laptops, capped for 2560px screens. */
  --syn-hero-h: clamp(420px, calc(40vw + 100px), 860px);

  /* Aspect ratio of the mobile hero crop (key visual at x 36-100%). */
  --syn-kv-ratio-mobile: 1.1375;

  /* Button label at 19px bold = WCAG "large text" (>= 14pt bold), which is
     what lets white on #30AB0D (3.02:1) pass AA. Reuses the h4 size. */
  --syn-fs-button: var(--syn-fs-h4);

  /* Vertical rhythm. Co-mex's 72/52px section padding read as crowded on
     this page; sections now breathe from 72px (phones) to 144px (desktop). */
  --syn-section-y: clamp(var(--syn-space-18), 10vw, calc(var(--syn-space-18) * 2));
  --syn-head-gap: clamp(var(--syn-space-10), 5vw, var(--syn-space-18));

  /* Scroll reveal: distance, stagger step and easing. Duration is --syn-slow. */
  --syn-reveal-shift: var(--syn-space-8);
  --syn-reveal-step: 90ms;
  --syn-reveal-ease: cubic-bezier(.2, .7, .2, 1);

  /* Inside-page banners: the header image shows through a translucent
     layer of the one brand green, #30AB0D. */
  --syn-banner-overlay: color-mix(in srgb, var(--dx-green) 35%, transparent);
  /* Inside-page banners: start black (the header photos are shot on pure
     black); 1s after load a green layer wipes over them and stays. */
  --syn-header-dark: #000000;
  --syn-wipe-duration: 700ms;
  --syn-wipe-feather: 30%;   /* width of the soft leading edge */

  --syn-page-hero-h: clamp(260px, 24vw, 360px);

  /* Focus ring colour; swapped per surface so it always clears 3:1
     (#30AB0D on #F9FAFB is only 2.89:1). */
  --syn-focus: var(--syn-accent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --syn-wipe-duration: 0ms; }
}