:root {
  /* Text - sizes */
  --p--font-scale: 1.15;
  --p--font-size--0: 1rem;
  --p--font-size--n1: calc(var(--p--font-size--0) / var(--p--font-scale));
  --p--font-size--n2: calc(var(--p--font-size--n1) / var(--p--font-scale));
  --p--font-size--n3: calc(var(--p--font-size--n2) / var(--p--font-scale));
  --p--font-size--1: calc(var(--p--font-size--0) * var(--p--font-scale));
  --p--font-size--2: calc(var(--p--font-size--1) * var(--p--font-scale));
  --p--font-size--3: calc(var(--p--font-size--2) * var(--p--font-scale));
  --p--font-size--4: calc(var(--p--font-size--3) * var(--p--font-scale));
  --p--font-size--5: calc(var(--p--font-size--4) * var(--p--font-scale));

  /* Text - height */
  --p--line-height--body: 1.5;
  --p--line-height--narrow: 1.25;
  --p--line-height--tight: 1;

  /* Dimensions - width */
  --p--layout--width--text: 40rem;
  --p--layout--width--wide: 60rem;
  --p--layout--width--content: 80rem;

  /* Spacing - base */
  --p--spacing--1-8: calc(var(--p--font-size--0) / 8);
  --p--spacing--1-4: calc(var(--p--font-size--0) / 4);
  --p--spacing--1-2: calc(var(--p--font-size--0) / 2);
  --p--spacing--3-4: calc(var(--p--font-size--0) * 3/4);
  --p--spacing--1: var(--p--font-size--0);
  --p--spacing--5-4: calc(var(--p--font-size--0) * 5/4);
  --p--spacing--3-2: calc(var(--p--font-size--0) * 3/2);
  --p--spacing--2: calc(var(--p--font-size--0) * 2);
  --p--spacing--3: calc(var(--p--font-size--0) * 3);
  --p--spacing--4: calc(var(--p--font-size--0) * 4);
  --p--spacing--5: calc(var(--p--font-size--0) * 8);

  /* Spacing - special */
  --p--layout--padding-sides: var(--p--spacing--3-2);
  --p--layout--padding-section: var(--p--spacing--3);
  --p--layout--spacing-section: var(--p--spacing--3);
  --p--layout--spacing-section-large: var(--p--spacing--4);
  --p--layout--spacing-section-xlarge: var(--p--spacing--4);
  --p--layout--spacing-list: var(--p--spacing--2);
  --p--layout--spacing-slides: var(--p--spacing--3-4);
  --p--layout--spacing-gallery: var(--p--spacing--1-2);
  --p--layout--nav-height: calc(2.25rem + 2 * var(--p--spacing--1));

  /* Colors - Base */
  --p--color--neutral--50: #ffffff;
  --p--color--neutral--100: #f9f9f9;
  --p--color--neutral--200: #e8e8e8;
  --p--color--neutral--300: #d5d5d5;
  --p--color--neutral--400: #bfbfbf;
  --p--color--neutral--500: #a2a1a1;
  --p--color--neutral--600: #858585;
  --p--color--neutral--700: #5d5d5d;
  --p--color--neutral--800: #3d3d3d;
  --p--color--neutral--900: #2b2b2b;
  --p--color--neutral--950: #0f0f0f;
}

@media (min-width: 48rem) {
  :root {
    --p--font-scale: 1.25;

    --p--layout--padding-sides: var(--p--spacing--4);
    --p--layout--padding-section: var(--p--spacing--2);
    --p--layout--spacing-list: var(--p--spacing--2);
    --p--layout--spacing-slides: var(--p--spacing--2);
    --p--layout--spacing-section-xlarge: var(--p--spacing--5);
  }
}
@container (max-width: 48rem) {
  * {
    --p--layout--spacing-slides: var(--p--spacing--3-4);
  }
}