:root {
  --ut-color-canvas: #faf6f0;
  --ut-color-surface: #fffcf7;
  --ut-color-surface-muted: #f4ede3;
  --ut-color-ink: #2c2722;
  --ut-color-muted: #6b6156;
  --ut-color-line: #e7dccb;
  --ut-color-sand: #efe6da;
  --ut-color-clay: #9e5f43;
  --ut-color-sage: #6f7a63;
  --ut-color-danger: #b4553f;
  --ut-font-body: "Hanken Grotesk", system-ui, sans-serif;
  --ut-font-display: "EB Garamond", Georgia, serif;
  --ut-font-weight-regular: 400;
  --ut-font-weight-medium: 500;
  --ut-font-weight-semibold: 600;
  --ut-font-weight-bold: 700;
  --ut-text-xs: .75rem;
  --ut-text-sm: .875rem;
  --ut-text-base: 1rem;
  --ut-text-md: 1.0625rem;
  --ut-text-lg: 1.25rem;
  --ut-text-xl: 1.75rem;
  --ut-text-2xl: clamp(2rem, 4vw, 3.5rem);
  --ut-leading-tight: 1.08;
  --ut-leading-normal: 1.5;
  --ut-leading-relaxed: 1.65;
  --ut-space-1: .25rem;
  --ut-space-2: .5rem;
  --ut-space-3: .75rem;
  --ut-space-4: 1rem;
  --ut-space-5: 1.25rem;
  --ut-space-6: 1.5rem;
  --ut-space-7: 1.75rem;
  --ut-space-8: 2rem;
  --ut-space-10: 2.5rem;
  --ut-space-12: 3rem;
  --ut-space-16: 4rem;
  --ut-space-20: 5rem;
  --ut-space-24: 6rem;
  /* The only public outer page contract. Narrower layouts belong to a nested
     composition, never to a page-specific replacement container. */
  --ut-container: 80rem;
  --ut-container-reading: 46rem;
  /* CDE page gutter: clamp(16px, 3vw, 40px) inside the 1360px frame (= 1280px content at 1440px). */
  --ut-gutter: clamp(1rem, 3vw, 2.5rem);
  --ut-radius-sm: .375rem;
  --ut-radius-control: .5rem;
  --ut-radius-md: .625rem;
  --ut-radius-pill: 999px;
  --ut-control-height: 3.125rem;
  --ut-control-height-lg: 3rem;
  --ut-border-subtle: 1px solid var(--ut-color-line);
  --ut-shadow-soft: 0 .5rem 2rem rgb(44 39 34 / 8%);
  --ut-shadow-menu: 0 1rem 2.5rem rgb(44 39 34 / 13%);
  --ut-transition-fast: 150ms ease;
  --ut-transition: 180ms ease;
  --ut-transition-slow: 260ms ease;
  --ut-icon-sm: 1rem;
  --ut-icon-md: 1.25rem;
  --ut-icon-lg: 1.5rem;
  --ut-product-image-fit: cover;
  --ut-product-image-position: 50% 50%;
  --ut-breakpoint-mobile: 44rem;
  --ut-breakpoint-tablet: 64rem;
  --ut-z-header: 60;
  --ut-z-menu: 70;
  --ut-z-drawer: 80;
  --ut-z-modal: 100;
}