/* Measured reference geometry. See docs/DESIGN-SYSTEM.md for evidence and exceptions. */
:root {
  --color-ink: #212123;
  --color-paper: #fff;
  --color-muted: #a6a6a7;
  --color-line: #707070;
  --color-line-light: #e9e9e9;
  --color-placeholder: #e9e9e9;
  --color-placeholder-alt: #d7d7d7;
  --color-hero-placeholder: #777;
  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --weight-regular: 400;
  --tracking: 0em;
  --display-stretch: expanded;
  --header-height: 4.25vw;
  --page-gutter: 1.563vw;
  --grid-gap: 1.953vw;
  --grid-row-gap: 16.25vh;
  --catalog-pad: 16vh;
  --catalog-card-height: 23vw;
  --catalog-feature-height: 46vw;
  --catalog-filter-width: 17.813vw;
  --catalog-filter-right-reserve: 21.363vw;
  --nav-gap: 4.375vw;
  --nav-dot-width: 1.328vw;
  --nav-dot-height: .703vw;
  --type-micro: .703vw;
  --type-small: .781vw;
  --type-product: .859vw;
  --type-label: .938vw;
  --type-body: 1.25vw;
  --type-subheading: 1.406vw;
  --type-heading: 1.484vw;
  --type-article-title: 2.031vw;
  --radius-filter: 3.5vw;
  --radius-popover: 3.516vw;
  --radius-details: 80px;
  --duration-press: .15s;
  --duration-ui: .3s;
  --duration-marker: .4s;
  --duration-fade: .5s;
  --ease-ui: ease-in-out;
  --ease-reveal: cubic-bezier(.12,.67,.53,1);
  --ease-underline: cubic-bezier(.65,.05,.36,1);
  --z-header: 99;
  --z-notice: 1000;
}
/* Orientation is part of this query: landscape tablets retain the desktop grid. */
@media (max-width:1024px) and (orientation:portrait) {
  :root {
    --header-height: 56px;
    --page-gutter: 20px;
    --type-micro: 10px;
    --type-small: 12px;
    --type-product: 11px;
    --type-label: 12px;
    --type-body: 16px;
    --type-subheading: 20px;
    --type-heading: 19px;
    --type-article-title: 26px;
    --radius-details: 50px;
  }
}

/* Shared typography roles: five restrained sizes, two weights. */
:root {
  --font-primary: Arial, Helvetica, sans-serif;
  --font-display:var(--font-primary);
  --font-body:var(--font-primary);
  --display-stretch:normal;
  --text-utility:11px;
  --text-navigation:12px;
  --text-page-title:clamp(20px,1.6vw,24px);
  --text-section-heading:18px;
  --text-product-name:12px;
  --text-product-price:12px;
  --text-body:clamp(14px,1.05vw,16px);
  --text-product-information:14px;
  --text-metadata:11px;
  --text-caption:11px;
  --text-control:12px;
  --text-filter:11px;
  --text-footer:11px;
  --leading-heading:1.3;
  --leading-body:1.65;
  --leading-ui:1.4;
  --tracking-ui:.04em;
  --type-micro:var(--text-utility);
  --type-small:var(--text-product-name);
  --type-product:var(--text-product-name);
  --type-label:var(--text-control);
  --type-body:var(--text-body);
  --type-subheading:var(--text-section-heading);
  --type-heading:var(--text-page-title);
  --type-article-title:var(--text-page-title);
}