:root {
  color-scheme: light dark;

  /* Color roles: copied 1:1 from the reference site's palette (efd/efw design tokens). */
  --ay-color-ivory: #fbf7f2;
  --ay-color-paper: #ffffff;
  --ay-color-navy: #23303a;
  --ay-color-brand-navy: #071f37;
  --ay-color-navy-soft: #3b4a56;
  --ay-color-ink: #23303a;
  --ay-color-ink-muted: #5b6b79;
  --ay-color-gold: #f0a202;
  --ay-color-gold-dark: #cf8a00;
  --ay-color-gold-soft: #fbe4b8;
  --ay-color-sage: #0e5a6e;
  --ay-color-sage-soft: #e9f4f4;
  --ay-color-line: #ece4da;
  --ay-color-line-strong: #ddd0be;
  --ay-color-danger: #a7332d;
  --ay-color-danger-soft: #f9e5e1;
  --ay-color-success: #35634d;
  --ay-color-focus: #176da5;
  --ay-color-on-navy: #ffffff;

  --ay-font-display: "Source Serif 4", Georgia, serif;
  --ay-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ay-font-data: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ay-step--1: clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem);
  --ay-step-0: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --ay-step-1: clamp(1.3rem, 1.19rem + 0.48vw, 1.6rem);
  --ay-step-2: clamp(1.65rem, 1.42rem + 0.92vw, 2.25rem);
  --ay-step-3: clamp(2.1rem, 1.73rem + 1.5vw, 3.15rem);
  --ay-step-4: clamp(2.75rem, 2rem + 3vw, 5.5rem);
  --ay-leading-tight: 1.04;
  --ay-leading-heading: 1.15;
  --ay-leading-body: 1.62;
  --ay-measure: 70ch;

  --ay-space-1: 0.25rem;
  --ay-space-2: 0.5rem;
  --ay-space-3: 0.75rem;
  --ay-space-4: 1rem;
  --ay-space-5: 1.5rem;
  --ay-space-6: 2rem;
  --ay-space-7: 3rem;
  --ay-space-8: 4rem;
  --ay-space-9: 6rem;
  --ay-space-10: 8rem;

  --ay-radius-control: 0.75rem;
  --ay-radius-panel: 1.25rem;
  --ay-radius-round: 999px;
  --ay-border: 1px solid var(--ay-color-line);
  --ay-shadow-raised: 0 2.5rem 5rem -2rem rgba(9, 43, 76, 0.28), 0 1rem 2rem -1rem rgba(9, 43, 76, 0.16);
  --ay-shadow-control: 0 0.9rem 1.75rem -0.75rem rgba(9, 43, 76, 0.28), 0 0.2rem 0.5rem -0.15rem rgba(9, 43, 76, 0.14);
  --ay-shadow-gold: 0 0.375rem 1.125rem rgba(240, 162, 2, 0.34);

  --ay-shell: 72.5rem;
  --ay-reading: 46rem;
  --ay-target: 3rem;
  --ay-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ay-duration-base: 420ms;
  --ay-route-progress: 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ay-color-ivory: #101820;
    --ay-color-paper: #17242d;
    --ay-color-navy: #f1f5f7;
    --ay-color-navy-soft: #d5dfe4;
    --ay-color-ink: #edf2f4;
    --ay-color-ink-muted: #bdc9cf;
    --ay-color-gold: #f2b33a;
    --ay-color-gold-dark: #d79a22;
    --ay-color-gold-soft: #493717;
    --ay-color-sage: #78c5d3;
    --ay-color-sage-soft: #17333b;
    --ay-color-line: #2d3c45;
    --ay-color-line-strong: #4b5b64;
    --ay-color-danger: #ffaaa3;
    --ay-color-danger-soft: #4a2424;
    --ay-color-success: #9ed8b7;
    --ay-color-focus: #68b7e8;
    --ay-color-on-navy: #f7fafb;
  }
}

@media (max-width: 40rem) {
  :root {
    --ay-step--1: 1.0625rem;
    --ay-step-0: 1.125rem;
    --ay-leading-body: 1.58;
    --ay-space-8: 3rem;
    --ay-space-9: 4.5rem;
    --ay-space-10: 6rem;
  }
}