:root {

  --slate: #22404B;
  --slate-deep: #1A323A;
  --slate-raised: #2E525E;

  --sage: #6B9B7D;
  --sage-deep: #528468;

  --sage-cta: #3F6B52;
  --sage-cta-deep: #35593F;

  --cream: #FEFAF7;
  --ink: #3B2E35;
  --ink-soft: #5E4F56;

  --ink-faint: rgba(59, 46, 53, 0.72);
  --ink-hairline: rgba(59, 46, 53, 0.16);

  --ink-cta-ghost-border: rgba(59, 46, 53, 0.60);

  --scrim-strong: rgba(16, 24, 27, 0.30);
  --scrim-zero: rgba(16, 24, 27, 0);

  --on-slate: #FFFFFF;
  --on-slate-muted: rgba(255, 255, 255, 0.70);

  --on-slate-faint: rgba(255, 255, 255, 0.60);

  --on-slate-hairline: rgba(255, 255, 255, 0.14);

  --cta-ghost-border: rgba(255, 255, 255, 0.45);

  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2rem, 2.8571vw + 1.3571rem, 3.5rem);
  --fs-h1:      clamp(1.5rem, 1.8182vw + 1.1364rem, 2.5rem);
  --fs-h2:      clamp(1.125rem, 1.039vw + 0.9708rem, 1.75rem);
  --fs-lead:    clamp(1.0625rem, 0.5195vw + 0.9854rem, 1.375rem);
  --fs-body:    clamp(1rem, 0.2597vw + 0.9302rem, 1.125rem);
  --fs-sm:      clamp(0.8125rem, 0.1948vw + 0.7914rem, 0.9375rem);

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

  --radius: 20px;
  --radius-sm: 14px;
  --shadow-soft: 0 2px 20px rgba(20, 32, 36, 0.10);
  --shadow-md: 0 8px 30px rgba(20, 32, 36, 0.18);
  --shadow-sage: 0 6px 22px rgba(82, 132, 104, 0.35);

  --motion-duration: 180ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --hero-image: url('/images/hero-hands.webp');

  --vh: 1vh;
  --hero-height: calc(31 * var(--vh));

  --hero-position: 50% 50%;

  --panel-bg: var(--slate);

  --hero-seam-bg: var(--panel-bg);

  --measure: 34rem;

  --sheet: 53.25rem;
  --hero-natural-height: 29.9375rem;
}

@supports (height: 1dvh) {
  :root {
    --vh: 1dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0.01ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --on-slate-muted: rgba(255, 255, 255, 0.92);
    --on-slate-faint: rgba(255, 255, 255, 0.78);
    --on-slate-hairline: rgba(255, 255, 255, 0.45);
    --ink-faint: rgba(59, 46, 53, 0.75);
    --ink-hairline: rgba(59, 46, 53, 0.45);
  }
}