:root {
  /* shared type scale */
  --text-size-title-display: clamp(2rem, 6vw, 5.5rem);
  --text-size-ui: clamp(0.95rem, 1.4vw, 1.1rem);
  --text-size-ui-wide: clamp(0.95rem, 1.6vw, 1.1rem);
  --text-size-intro: clamp(1.85rem, 2.1vw, 2.7rem);
  --text-size-meta: clamp(0.92rem, 1vw, 1.05rem);
  --text-size-intro-mobile: clamp(1.35rem, 7vw, 2rem);
  --text-size-meta-mobile: 0.9rem;

  /* shared font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* shared semantic type roles */
  --title-size: var(--text-size-title-display);
  --menu-size: var(--text-size-ui);
  --header-size: var(--text-size-ui-wide);
  --footer-size: var(--text-size-ui-wide);
  --intro-size: var(--text-size-intro);
  --meta-size: var(--text-size-meta);
  --intro-size-mobile: var(--text-size-intro-mobile);
  --meta-size-mobile: var(--text-size-meta-mobile);

  --title-weight: var(--font-weight-medium);
  --menu-weight: var(--font-weight-light);
  --header-weight: var(--font-weight-light);
  --footer-weight: var(--font-weight-light);
  --intro-weight: var(--font-weight-regular);
  --meta-weight: var(--font-weight-light);

  --title-transform: none;
  --menu-transform: uppercase;
  --header-transform: uppercase;
  --footer-transform: uppercase;
  --intro-transform: none;
  --meta-transform: uppercase;

  /* colors */
  --page-bg: #f4f4f4;
  --title-color: #ffffff;
  --menu-color: #ffffff;
  --header-color: #ffffffd9;
  --footer-color: #ffffffd9;
  --overlay-hover-color: rgba(0, 0, 0, 0.12);

  /* transition tempo */
  --transform: 1.0s ease;
  --opacity: 1.0s ease;
  --link-hover-opacity: 0.4;
  --link-hover-scale: 1.08;
  --top-link-hover-scale: 1.32;
  --menu-link-hover-scale: 1.2;
}