:root {
  --layout-gap: var(--templates-margin-l);
  --container-width: var(--templates-layout-page-limit-max);
  --container-padding-horizontal: var(--templates-margin-l);
  --container-padding-top: var(--templates-margin-l);
  --container-padding-bottom: var(--templates-margin-8xl);
}

@media (max-width: 29.99em) {
  :root {
    --templates-layout-image-highlighted-height: 17.5rem;
    --templates-layout-image-small-height: 17.5rem;
    --templates-layout-page-limit-max: 40rem;
    --templates-margin-none: 0rem;
    --templates-margin-s: 0.375rem;
    --templates-margin-m: 0.75rem;
    --templates-margin-l: 1rem;
    --templates-margin-xl: 1.75rem;
    --templates-margin-2xl: 2.25rem;
    --templates-margin-3xl: 2.625rem;
    --templates-margin-4xl: 3rem;
    --templates-margin-5xl: 3.625rem;
    --templates-margin-6xl: 4rem;
    --templates-margin-7xl: 4.5rem;
    --templates-margin-8xl: 6.25rem;
    --templates-margin-9xl: 9.25rem;
    --templates-viewport-min: 18.75rem;
    --templates-viewport-default: 22.5rem;
    --templates-viewport-max: 50rem;
    --templates-width-max-xs: 6.25rem;
    --templates-width-max-s: 12.5rem;
    --templates-width-max-m: 18.75rem;
    --templates-width-max-l: 25rem;
    --templates-width-max-xl: 31.25rem;
    --templates-width-max-2xl: 37.5rem;
    --templates-width-max-3xl: 43.75rem;
    --templates-width-max-4xl: 50rem;
    --templates-width-max-5xl: 50rem;
    --templates-width-max-6xl: 50rem;
    --templates-width-max-7xl: 50rem;
    --templates-width-max-8xl: 50rem;
    --templates-width-min-xs: 6.25rem;
    --templates-width-min-s: 12.5rem;
    --templates-width-min-m: 18.75rem;
    --templates-width-min-l: 18.75rem;
    --templates-width-min-2xl: 18.75rem;
    --templates-width-min-3xl: 18.75rem;
    --templates-width-min-4xl: 18.75rem;
    --templates-width-min-5xl: 18.75rem;
    --templates-width-min-6xl: 18.75rem;
    --templates-width-min-7xl: 18.75rem;
    --templates-width-min-8xl: 18.75rem;
  }
}

@media (min-width: 30em) and (max-width: 63.99em) {
  :root {
    --templates-layout-image-small-height: 11.75rem;
    --templates-layout-image-highlighted-height: 35.75rem;
    --templates-layout-page-limit-max: 75rem;
    --templates-margin-none: 0rem;
    --templates-margin-s: 0.5rem;
    --templates-margin-m: 1rem;
    --templates-margin-l: 1.5rem;
    --templates-margin-xl: 2rem;
    --templates-margin-2xl: 2.5rem;
    --templates-margin-3xl: 3rem;
    --templates-margin-4xl: 3.5rem;
    --templates-margin-5xl: 4rem;
    --templates-margin-6xl: 4.5rem;
    --templates-margin-7xl: 5rem;
    --templates-margin-8xl: 7.5rem;
    --templates-margin-9xl: 10rem;
    --templates-viewport-min: 40rem;
    --templates-viewport-default: 64rem;
    --templates-viewport-max: 90rem;
    --templates-width-max-xs: 6.25rem;
    --templates-width-max-s: 12.5rem;
    --templates-width-max-m: 18.75rem;
    --templates-width-max-l: 25rem;
    --templates-width-max-xl: 31.25rem;
    --templates-width-max-2xl: 37.5rem;
    --templates-width-max-3xl: 43.75rem;
    --templates-width-max-4xl: 50rem;
    --templates-width-max-5xl: 56.25rem;
    --templates-width-max-6xl: 62.5rem;
    --templates-width-max-7xl: 68.75rem;
    --templates-width-max-8xl: 75rem;
    --templates-width-min-xs: 6.25rem;
    --templates-width-min-s: 12.5rem;
    --templates-width-min-m: 18.75rem;
    --templates-width-min-l: 25rem;
    --templates-width-min-xl: 31.25rem;
    --templates-width-min-2xl: 37.5rem;
    --templates-width-min-3xl: 43.75rem;
    --templates-width-min-4xl: 50rem;
    --templates-width-min-5xl: 56.25rem;
    --templates-width-min-6xl: 62.5rem;
    --templates-width-min-7xl: 68.75rem;
  }
}

@media (min-width: 64em) {
  :root {
    --templates-layout-image-small-height: 11.75rem;
    --templates-layout-image-highlighted-height: 35.75rem;
    --templates-layout-page-limit-max: 75rem;
    --templates-margin-none: 0rem;
    --templates-margin-s: 0.5rem;
    --templates-margin-m: 1rem;
    --templates-margin-l: 1.5rem;
    --templates-margin-xl: 2rem;
    --templates-margin-2xl: 2.5rem;
    --templates-margin-3xl: 3rem;
    --templates-margin-4xl: 3.5rem;
    --templates-margin-5xl: 4rem;
    --templates-margin-6xl: 4.5rem;
    --templates-margin-7xl: 5rem;
    --templates-margin-8xl: 7.5rem;
    --templates-margin-9xl: 10rem;
    --templates-viewport-min: 50rem;
    --templates-viewport-default: 90rem;
    --templates-viewport-max: 128.75rem;
    --templates-width-max-xs: 6.25rem;
    --templates-width-max-s: 12.5rem;
    --templates-width-max-m: 18.75rem;
    --templates-width-max-l: 25rem;
    --templates-width-max-xl: 31.25rem;
    --templates-width-max-2xl: 37.5rem;
    --templates-width-max-3xl: 43.75rem;
    --templates-width-max-4xl: 50rem;
    --templates-width-max-5xl: 56.25rem;
    --templates-width-max-6xl: 62.5rem;
    --templates-width-max-7xl: 68.75rem;
    --templates-width-max-8xl: 75rem;
    --templates-width-min-xs: 6.25rem;
    --templates-width-min-s: 12.5rem;
    --templates-width-min-m: 18.75rem;
    --templates-width-min-l: 25rem;
    --templates-width-min-xl: 31.25rem;
    --templates-width-min-2xl: 37.5rem;
    --templates-width-min-3xl: 43.75rem;
    --templates-width-min-4xl: 50rem;
    --templates-width-min-5xl: 56.25rem;
    --templates-width-min-6xl: 62.5rem;
    --templates-width-min-7xl: 68.75rem;
  }
}

:root[data-theme='light'] {
  --component-footer-background: var(--color-primary-900);
  --component-footer-separator: var(--color-primary-600);
  --component-footer-text-link: var(--color-primary-200);
  --component-footer-text-primary: var(--color-neutral-0);
  --component-footer-text-secondary: var(--color-neutral-200);
  --component-nav-background: var(--color-neutral-0);
  --component-nav-separator: var(--color-primary-200);
  --component-nav-text-link: var(--color-primary-900);
  --component-nav-text-primary: var(--color-primary-800);
  --component-nav-text-secondary: var(--color-neutral-900);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]),
  html[data-theme='auto'] {
    --component-footer-background: var(--color-primary-900);
    --component-footer-separator: var(--color-primary-600);
    --component-footer-text-link: var(--color-primary-200);
    --component-footer-text-primary: var(--color-neutral-0);
    --component-footer-text-secondary: var(--color-neutral-200);
    --component-nav-background: var(--color-neutral-0);
    --component-nav-separator: var(--color-primary-200);
    --component-nav-text-link: var(--color-primary-900);
    --component-nav-text-primary: var(--color-primary-800);
    --component-nav-text-secondary: var(--color-neutral-900);
  }
}

:root[data-theme='dark'] {
  --component-footer-background: var(--color-neutral-950);
  --component-footer-separator: var(--color-neutral-600);
  --component-footer-text-link: var(--color-primary-100);
  --component-footer-text-primary: var(--color-neutral-50);
  --component-footer-text-secondary: var(--color-neutral-200);
  --component-nav-background: var(--color-neutral-950);
  --component-nav-separator: var(--color-neutral-600);
  --component-nav-text-link: var(--color-neutral-0);
  --component-nav-text-primary: var(--color-neutral-0);
  --component-nav-text-secondary: var(--color-neutral-100);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]),
  html[data-theme='auto'] {
    --component-footer-background: var(--color-neutral-950);
    --component-footer-separator: var(--color-neutral-600);
    --component-footer-text-link: var(--color-primary-100);
    --component-footer-text-primary: var(--color-neutral-50);
    --component-footer-text-secondary: var(--color-neutral-200);
    --component-nav-background: var(--color-neutral-950);
    --component-nav-separator: var(--color-neutral-600);
    --component-nav-text-link: var(--color-neutral-0);
    --component-nav-text-primary: var(--color-neutral-0);
    --component-nav-text-secondary: var(--color-neutral-100);
  }
}