:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-border: #000000;
  --color-border-light: rgba(0, 0, 0, 0.4);
  --color-nav-border: rgba(255, 255, 255, 0.25);
  --color-nav-active: #ffffff;
  --color-nav-inactive: rgba(255, 255, 255, 0.5);
  --color-credits: rgba(255, 255, 255, 0.5);

  /* Fonts */
  --font-beausite: 'Beausite Classic', sans-serif;
  --font-mono: 'Geist Mono', monospace;

  /* Type scale — desktop */
  --text-display: 120px;
  --text-h2: 85px;
  --text-h3: 50px;
  --text-body: 16px;
  --text-label: 13px;
  --text-button: 16px;
  --text-nav-section: 20px;
  --text-nav-item: 16px;
  --text-credits: 12px;

  /* Line heights */
  --lh-display: 0.95;
  --lh-h2: 1;
  --lh-h3: 1;
  --lh-body: 1.4;
  --lh-label: 1;
  --lh-button: 1.2;
  --lh-nav: 1;

  /* Letter spacings */
  --ls-display: -7.2px;
  --ls-h2: -3.4px;
  --ls-h3: -2px;
  --ls-body: -0.48px;
  --ls-label: 0;
  --ls-button: -0.16px;

  /* Layout — desktop */
  --sidebar-w: 262px;
  --content-left: calc(33.33% + 11px);
  --content-right: 16px;
  --content-top: 16px;
  --label-col: 340px;
  --col-gap: 16px;
  --nav-bar-h: 56px;

  /* Spacing */
  --section-gap: 104px;
  --inner-gap: 48px;
  --heading-body-gap: 80px;
  --para-gap: 20px;
  --index-gap: 40px;
  --sub-gap: 8px;

  /* Animation */
  --dur-fast: 120ms;
  --dur-view: 250ms;
  --dur-drawer: 350ms;
  --dur-accordion: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-view: cubic-bezier(0.4, 0, 0.2, 1);
}