:root {
  --color-paper: #FFFFFF;
  --color-warm-paper: #F7F5F0;
  --color-ink: #18232D;
  --color-graphite: #545B60;
  --color-stone: #D9D6CF;
  --color-copper: #9A5D36;
  --color-deep-teal: #315A57;

  --accent: var(--color-copper);
  --accent-contrast: var(--color-paper);

  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-sans: "Source Sans 3", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --font-display: clamp(2.85rem, 5.8vw, 4.25rem);
  --font-h1: clamp(2.65rem, 5.2vw, 4rem);
  --font-h2: clamp(2rem, 3.6vw, 2.75rem);
  --font-h3: clamp(1.45rem, 2.2vw, 1.875rem);
  --font-body: 1.0625rem;
  --font-body-small: 0.9375rem;
  --font-meta: 0.8125rem;
  --font-eyebrow: 0.75rem;

  --leading-display: 0.99;
  --leading-heading: 1.08;
  --leading-body: 1.62;
  --leading-ui: 1.35;

  --tracking-tight: -0.018em;
  --tracking-ui: 0.01em;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.105em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-none: 0;
  --radius-small: 2px;
  --radius-medium: 4px;

  --border-width: 1px;
  --border-color: var(--color-stone);
  --focus-width: 2px;
  --focus-offset: 3px;
  --focus-color: var(--color-copper);

  --elevation-none: none;
  --elevation-quiet: 0 10px 30px rgba(24, 35, 45, 0.08);

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  --content-text: 72ch;
  --content-wide: 75rem;
  --content-max: 80rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --z-base: 1;
  --z-header: 20;
  --z-drawer-backdrop: 40;
  --z-drawer: 50;
  --z-skip-link: 100;

  --section-space: clamp(4rem, 8vw, 8rem);
  --control-height: 2.875rem;
}

[data-theme="jgtel"] {
  --accent: var(--color-copper);
  --focus-color: var(--color-copper);
}

[data-theme="erss"] {
  --accent: var(--color-deep-teal);
  --focus-color: var(--color-deep-teal);
}

@media (max-width: 64rem) {
  :root {
    --section-space: clamp(3.5rem, 7vw, 5rem);
  }
}

@media (max-width: 48rem) {
  :root {
    --font-body: 1rem;
    --section-space: 3.5rem;
    --gutter: 1.25rem;
  }
}