:root {
  /* Color system */
  --color-primary: #0d964d;
  --color-cta-hover: hsl(152, 98%, 28%);
  --color-cta: hsl(16, 80%, 60%);
  --color-secondary: #29D67A;
  --color-accent-blue: #BCEDF5;
  --color-accent-green: hsl(148, 89%, 75%);
  --color-error: #d64545;
  --color-divider: #e3e3e3;
  --color-title: #333333;
  --color-body: #7a7a7a;
  --color-background: #fdfdfd;

  /* Effects */
  --shadow-header: 0px 3px 20px -5px rgba(0, 0, 0, 0.35);
  --shadow-cta: 0px 3px 15px -4px rgba(0, 0, 0, 0.35);
  --shadow-cta-strong: 0px 8px 20px -4px rgba(0, 0, 0, 0.35);
  --mask-image: url('../images/ImageMask.webp');

  /* Motion */
  --motion-fast: 120ms ease;
  --motion-default: 180ms ease;
  --motion-slow: 240ms ease;
  --transition-image: 800ms ease;

  /* Media elements */
  --media-overlay-transition: var(--motion-default);
  --media-play-size: clamp(3.75rem, 8vw, 5.375rem);
  --media-play-mask: url('../../images/sprites/Play_Button_Image.webp');
  --media-play-opacity: 0.85;
  --media-play-transition: var(--motion-fast);
}

html {
  -webkit-tap-highlight-color: transparent;
}