: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: 1.5px 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: #e9f799;

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