/* antal studio 27: contextuele ACSS-tokens gekoppeld aan het merkpalet.
   :root:root wint van de :root van ACSS, ongeacht de laadvolgorde. */
:root:root {
  --body-bg-color: var(--secondary);
  --text-dark: var(--base);
  --text-light: var(--secondary);
  --bg-ultra-dark: var(--base);
  --border-color-dark: color-mix(in oklab, var(--base) 20%, transparent);
}

/* Typografische schaal en globale details */
:root {
  --_font-black: GravitaGEOBl, var(--heading-font-family);
  --_font-medium: GravitaGEOM, var(--text-font-family);
  --_display-1: clamp(2.75rem, 1rem + 6.6vw, calc(var(--h1) * 2.4));
  --_display-2: clamp(2.25rem, 1rem + 4.6vw, calc(var(--h1) * 1.9));
  --_display-3: clamp(2rem, 1rem + 3.2vw, calc(var(--h1) * 1.45));
  --_ease: cubic-bezier(0.22, 1, 0.36, 1);
}

::selection {
  background-color: var(--primary);
  color: var(--secondary);
}

html {
  scroll-padding-block-start: var(--space-l);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Roze lijntje over de icosaëder op de homepage (zie .ico). Loopt in ca. 2 seconden, daarna rust. */
@keyframes ico-pulse {
  0% { stroke-dashoffset: 8; opacity: 0; }
  2% { opacity: 1; }
  16% { stroke-dashoffset: -100; opacity: 1; }
  17%, 100% { stroke-dashoffset: -100; opacity: 0; }
}