:root {
  --padding: 0.75rem;

  --padding-xxs: calc(var(--padding) / 8);
  --padding-xs: calc(var(--padding) / 4);
  --padding-sm: calc(var(--padding) / 2);
  --padding-sm-semi: calc(var(--padding) * 0.75);
  --padding-md: calc(var(--padding) * 1.5);
  --padding-lg: calc(var(--padding) * 2);
  --padding-xl: calc(var(--padding) * 4);
  --padding-xxl: calc(var(--padding) * 8);

  --border: 1px solid var(--color-primary);

  --sizes-heading-height: calc(
    var(--font-size-heading) * var(--font-line-height-heading)
  );
  --sizes-header-height: calc(
    var(--sizes-heading-height) * 2 + var(--padding-md)
  );
  --sizes-content-height: calc(100dvh - var(--sizes-header-height));
  --sizes-paragraph-gap-body: calc(
    var(--font-size-body) * var(--font-line-height-body)
  );
  --sizes-paragraph-gap-section: calc(
    var(--font-size-body) * var(--font-line-height-gap)
  );

  --font-family: "Tonka", "Trebuchet MS", Helvetica, sans-serif;
  --font-size-body: 0.9375rem;
  --font-size-heading: 1.3125rem;
  --font-line-height-body: 1.2;
  --font-line-height-gap: 0.4;
  --font-line-height-heading: 1.157;
  --font-line-height-trim: 0.9;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-width-regular: 100;
  --font-variation-settings-width-regular: "wdth" var(--font-width-regular);
  --font-variation-settings-weight-medium: "wght" var(--font-weight-medium);
  --font-variation-settings-weight-bold: "wght" var(--font-weight-bold);
  --font-variation-settings-regular-medium:
    var(--font-variation-settings-width-regular),
    var(--font-variation-settings-weight-medium);
  --font-variation-settings-regular-bold:
    var(--font-variation-settings-width-regular),
    var(--font-variation-settings-weight-bold);

  --color-primary: #9f845a;
  --color-primary-muted: #cfc2ad;
  --color-bg: #000;

  --z-index-top: 900;
  --z-index-max: 999;

  --transition-duration-hover: 100ms;
  --transition-duration-hover--long: 300ms;
  --transition-timing-function-hover: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-hover: var(--transition-duration-hover)
    var(--transition-timing-function-hover);
  --transition-hover--long: var(--transition-duration-hover--long)
    var(--transition-timing-function-hover);
}

@media screen and (width < 1000px) {
  :root {
    --sizes-header-height: calc(
      var(--sizes-heading-height) + var(--padding-md)
    );
    --sizes-content-height: calc(100dvh - var(--sizes-header-height));
  }
}