/* Tokens bridge.
   Every design value lives in Elementor Site Settings as a V4 global variable (Elementor prints them
   all on :root on every front-end page, so Jet changes a colour or a spacing value in one place).
   This file only ALIASES the kit's names onto those variables, plus the few values Elementor
   cannot store as a variable (a transform, a filter). Component CSS never uses a raw hex or px. */
:root {
  --font: var(--font-main), system-ui, sans-serif;
  --r-nav: var(--r-pill);
  --r-btn: var(--r-pill);
  --ddc-purple-tint: var(--pill-fill);
  --purple-halo: var(--focus-ring);
  --on-ink-line: var(--line);
  --fs-menu-dvh: var(--fs-menu);
  --turn: rotate(45deg);
  --blur: blur(10px);
  /* Dropdown menu (8 Oct): never narrower than this or the pill; card corners. */
  --menu-w: calc(var(--gap-100) * 3 + var(--gap-20));
  --r-menu: var(--r-panel, var(--r-card));
  --menu-arrow: calc(var(--gap-20) + var(--gap-10) + var(--gap-4)); /* 34px - still above the 24px AA target */
  --dur-slide: 520ms;
  --ease-slide: cubic-bezier(.32, .72, 0, 1);
  --lock-sbw: 0px;
  /* Nav offset: one gutter + one card gap (29 Sept, Richard) - 50px desktop, ~41 tablet, 30 phone. */
  --nav-top: calc(var(--gut) + var(--gap-10));
  /* Mock roles (kit.css .theme-asphalt) mapped onto the V4 variables. */
  --ink-2: var(--card);
  /* .section--band had no value on the live site, so About, Services and Accreditations rendered with no
     card at all (30 Sept, Richard). In the locked Black 6 C theme the mock's band IS the card colour. */
  --band: var(--card);
  --on-ink: var(--white);
  --on-ink-fill: var(--on-dark-fill);
  --on-ink-soft: var(--ddc-purple-soft);
  /* Gradients: Elementor cannot store these as variables. Values are the mock's. */
  --scrim: linear-gradient(180deg, rgb(15 19 48 / .55) 0%, rgb(15 19 48 / 0) 38%, rgb(15 19 48 / .6) 100%);
  --tile-scrim: linear-gradient(180deg, rgb(15 19 48 / 0) 40%, rgb(15 19 48 / .72) 100%);
}