:root {
  --padding: 0.625rem;
  --padding-semi-md: calc(var(--padding) * 1.1);
  --padding-md: calc(var(--padding) * 1.5);
  --padding-sm: calc(var(--padding) * 0.5);
  --padding-lg: calc(var(--padding) * 2);
  --padding-xl: 10rem;
  --padding-xl--horizontal: 7.5rem;
  --padding-semi-xxl: calc(var(--padding) * 6);
  --padding-xxl: calc(var(--padding) * 8);

  --gap-line-height-body: calc(
    var(--font-size-body) * var(--font-line-height-body)
  );
  --gap-line-height-body--trim: calc(
    var(--font-size-body) * var(--font-line-height-body--trim)
  );
  --gap-line-height-small: calc(
    var(--font-size-small) * var(--font-line-height-body)
  );
  --sizes-column: calc((100dvw - (var(--padding) * 2)) / 16);
  --sizes-header-height: calc(
    var(--gap-line-height-body--trim) + var(--padding-semi-md) + var(--padding)
  );

  --font-size-body: 1rem;
  --font-size-small: 0.8rem;
  --font-line-height-body: 1.3;
  --font-line-height-body--trim: 1.15;
  --font-size-title: 8rem;
  --font-line-height-title: 0.9;
  --font-letter-spacing-title: calc(var(--font-size-title) * -0.02);
  --font-letter-spacing-small: 0.05rem;

  --color-primary: #1a1a1a;
  --color-primary--inverted: #fff;
  --color-bg-rgb-code: 242, 242, 242;
  --color-bg: rgb(var(--color-bg-rgb-code));
  --color-bg--translucent: rgb(var(--color-bg-rgb-code), 0.65);
  --color-bg--accent: #e5e5e5;
  --color-accent: rgba(191, 191, 191, 0.25);
  --color-accent--opaque: #6d6d6d;

  --border: 1px solid var(--color-accent);
  --border--light: 1px solid rgba(var(--color-bg-rgb-code), 0.25);
  --background-gradient-16: repeating-linear-gradient(
    to right,
    var(--color-accent) 0,
    var(--color-accent) 1px,
    transparent 1px,
    transparent calc(100% / 16 - (1px / 16))
  );
  --background-gradient-8: repeating-linear-gradient(
    to right,
    var(--color-accent) 0,
    var(--color-accent) 1px,
    transparent 1px,
    transparent calc(100% / 8 - (1px / 8))
  );

  --z-index-max: 999;
  --z-index-top: 990;
  --z-index-background-top: 900;
}

@media screen and (width < 1000px) {
  :root {
    --padding-xl: calc(var(--padding) * 4);
    --sizes-column: calc((100dvw - (var(--padding) * 2)) / 8);
    --background-gradient-16: repeating-linear-gradient(
      to right,
      var(--color-accent) 0,
      var(--color-accent) 1px,
      transparent 1px,
      transparent calc(100% / 8 - (1px / 8))
    );
    --background-gradient-8: var(--background-gradient-16);

    --font-size-title: 2rem;
    --font-line-height-title: 0.9;
    --font-letter-spacing-title: calc(var(--font-size-title) * -0.02);
  }
}