:root {
  --color-cream: #f5e6d3;
  --color-orange: #e85a2c;
  --color-brown: #4a2418;
  --color-yellow: #f4b942;

  --bg-page: var(--color-cream);
  --bg-accent: var(--color-orange);
  --bg-ink: var(--color-brown);
  --bg-highlight: var(--color-yellow);

  --text-ink: var(--color-brown);
  --text-on-accent: var(--color-cream);
  --text-on-accent-readable: #32130a;
  --text-on-ink: var(--color-cream);

  --font-display: "Anek Latin", sans-serif;
  --font-body: "Magra", sans-serif;

  --radius-btn: 2px;
  --border-strong: 2px solid var(--color-brown);
  --border-hair: 1px solid var(--color-brown);

  --underline-thickness: 2px;
  --underline-offset: 0.18em;

  --header-height: 4rem;
  --touch-min: 44px;

  --container-max: 90rem;
  --section-pad-x: clamp(1.15rem, 4.5vw, 5.5rem);
  --section-pad-y: clamp(2rem, 4.5vw, 4.5rem);
  --rhythm: clamp(2rem, 4.5vw, 4.5rem);

  
  --fs-hero: clamp(2.65rem, 9.5vw, 7.5rem);
  --fs-h2: clamp(2.1rem, 5.5vw, 4.5rem);
  --fs-h3: clamp(1.4rem, 2.8vw, 1.875rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-num: clamp(3rem, 9vw, 7.5rem);
  --fs-faq-mark: clamp(3.75rem, 12vw, 11.25rem);

  --lh-tight: 1.05;
  --lh-body: 1.4;
  --tracking-tight: -0.02em;
  --tracking-label: 0.28em;

  --focus-ring: 2px solid var(--color-orange);
  --focus-on-accent: var(--text-on-accent-readable);
  --focus-offset: 3px;

  --z-header: 100;
  --z-nav: 90;
  --z-toggle: 110;

  --motion-fast: 170ms;
  --motion-base: 260ms;
  --motion-slow: 300ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-tactile: cubic-bezier(0.34, 1.15, 0.64, 1);

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-space-20: 80px;
  --ui-space-24: 96px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-type-h1: clamp(2.25rem, 1.5rem + 3.8vw, 5rem);
  --ui-type-h2: clamp(1.75rem, 1.35rem + 2.3vw, 3.25rem);
  --ui-type-h3: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
  --ui-leading-heading: 1.08;
  --ui-leading-body: 1.55;
  --ui-tracking-heading: -0.02em;
  --ui-touch-target: 44px;
  --ui-duration: var(--motion-fast);
  --ui-ease: var(--motion-ease-out);
  --ui-focus-color: var(--color-orange);
}

@media (min-width: 577px) {
  :root {
    --section-pad-x: clamp(1.5rem, 4vw, 5.5rem);
    --fs-hero: clamp(3rem, 8vw, 7.5rem);
  }
}

@media (min-width: 768px) {
  :root {
    --header-height: 4.25rem;
    --fs-hero: clamp(3.25rem, 6.5vw, 7.5rem);
  }
}

@media (min-width: 993px) {
  :root {
    --section-pad-y: clamp(2.5rem, 5vw, 5rem);
    --fs-hero: clamp(3.5rem, 5.8vw, 7.5rem);
  }
}

@media (min-width: 1441px) {
  :root {
    --section-pad-x: clamp(2.5rem, 3vw, 5.5rem);
  }
}