/* GENERATED by build_tokens.py — TOOO Web Design System 1.0.6.
   Source: tokens.json. Do not edit this file by hand. */
@font-face {
  font-family: "TOOO Inter";
  src: url("assets/fonts/Inter-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "TOOO Noto Sans SC";
  src: url("assets/fonts/NotoSansSC-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

.tooo-site {
  --tc-color-page: #F6F6F3;
  --tc-color-surface: #FFFFFF;
  --tc-color-subtle: #EEEEEA;
  --tc-color-ink: #202225;
  --tc-color-muted: #62666B;
  --tc-color-inverse: #FFFFFF;
  --tc-color-border: #D7DADD;
  --tc-color-border-strong: #85898F;
  --tc-color-brand: #FF6600;
  --tc-color-brand-text: #B34500;
  --tc-color-brand-text-hover: #963900;
  --tc-color-media: #171A1D;
  --tc-color-focus: #B34500;
  --tc-color-button-hover: #34373B;
  --tc-color-disabled-bg: #E3E4E1;
  --tc-color-disabled-text: #62666B;
  --tc-space-0: 0;
  --tc-space-4: 0.25rem;
  --tc-space-8: 0.5rem;
  --tc-space-12: 0.75rem;
  --tc-space-16: 1rem;
  --tc-space-20: 1.25rem;
  --tc-space-24: 1.5rem;
  --tc-space-32: 2rem;
  --tc-space-40: 2.5rem;
  --tc-space-48: 3rem;
  --tc-space-64: 4rem;
  --tc-space-80: 5rem;
  --tc-space-96: 6rem;
  --tc-space-128: 8rem;
  --tc-font-family: "TOOO Inter", "TOOO Noto Sans SC", sans-serif;
  --tc-font-tracking-base: 0em;
  --tc-font-tracking-english-heading: -0.02em;
  --tc-font-weight-400: 400;
  --tc-font-weight-500: 500;
  --tc-font-weight-600: 600;
  --tc-type-display-line-height: 1.18;
  --tc-type-display-weight: 600;
  --tc-type-product-title-line-height: 1.2;
  --tc-type-product-title-weight: 600;
  --tc-type-product-lead-line-height: 1.35;
  --tc-type-product-lead-weight: 500;
  --tc-type-section-line-height: 1.3;
  --tc-type-section-weight: 600;
  --tc-type-document-title-line-height: 1.3;
  --tc-type-document-title-weight: 600;
  --tc-type-subheading-line-height: 1.4;
  --tc-type-subheading-weight: 600;
  --tc-type-body-line-height: 1.6;
  --tc-type-body-weight: 400;
  --tc-type-compact-line-height: 1.6;
  --tc-type-compact-weight: 400;
  --tc-type-caption-line-height: 1.5;
  --tc-type-caption-weight: 400;
  --tc-type-control-line-height: 1.25;
  --tc-type-control-weight: 500;
  --tc-breakpoint-tablet: 768px;
  --tc-breakpoint-desktop: 1024px;
  --tc-layout-container-max: 78rem;
  --tc-layout-document-max: 62rem;
  --tc-layout-document-body-max: 45rem;
  --tc-layout-toc-width: 14rem;
  --tc-layout-toc-gap: 3rem;
  --tc-layout-product-image-max-height: 32.5rem;
  --tc-layout-portrait-mobile-max-width: 25rem;
  --tc-layout-nav-wordmark-height: 1rem;
  --tc-layout-menu-wordmark-height: 1.25rem;
  --tc-layout-caption-wordmark-height: 0.8125rem;
  --tc-layout-product-image-max-width: 43.333333333rem;
  --tc-radius-none: 0;
  --tc-radius-button: 0.5rem;
  --tc-radius-media: 0.625rem;
  --tc-radius-panel: 0.75rem;
  --tc-radius-circle: 624.9375rem;
  --tc-control-min-target: 2.75rem;
  --tc-control-button-height: 3rem;
  --tc-control-button-padding-inline: 1.5rem;
  --tc-control-icon-button-size: 2.75rem;
  --tc-control-field-min-height: 3rem;
  --tc-stroke-divider: 1px;
  --tc-stroke-control: 1px;
  --tc-stroke-focus: 3px;
  --tc-stroke-focus-offset: 3px;
  --tc-motion-fast: 120ms;
  --tc-motion-standard: 180ms;
  --tc-motion-overlay: 240ms;
  --tc-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --tc-motion-reduced-motion-duration: 0ms;
  --tc-media-landscape-ratio: 16 / 9;
  --tc-media-card-ratio: 4 / 5;
  --tc-media-works-column-ratio: 20fr 9fr;
  --tc-media-catalogue-frame-ratio: 4 / 3;
  --tc-media-product-frame-ratio: 4 / 3;
  --tc-media-eis-display-ratio: 47 / 15;
  --tc-media-eis-stacked-ratio: 2318 / 3015;
  --tc-media-default-object-fit: contain;
  --tc-media-max-autoplay-videos: 1;
  --tc-media-autoplay-min-viewport: 1024px;
  --tc-media-autoplay-visibility-threshold: 0.5;

  /* Responsive values and composition aliases. */
  --tc-type-display-size: 2.25rem;
  --tc-type-product-title-size: 2rem;
  --tc-type-product-lead-size: 1.5rem;
  --tc-type-section-size: 1.75rem;
  --tc-type-document-title-size: 2rem;
  --tc-type-subheading-size: 1.25rem;
  --tc-type-body-size: 1rem;
  --tc-type-compact-size: 1rem;
  --tc-type-caption-size: 0.875rem;
  --tc-type-control-size: 1rem;
  --tc-layout-gutter: 1.25rem;
  --tc-layout-grid-gap: 1.5rem;
  --tc-layout-section-gap: 2.5rem;
  --tc-layout-hero-gap: 1.5rem;
  --tc-layout-header-height: 4rem;
  --tc-layout-logo-width: 9rem;
  --tc-layout-footer-padding: 1.5rem;
  --tc-layout-table-cell-min-width: 9rem;
  --tc-layout-columns: 1;
  --tc-works-columns: minmax(0, 1fr);
  --tc-portrait-width: min(100%, var(--tc-layout-portrait-mobile-max-width));
  --tc-hero-columns: minmax(0, 1fr);
  --tc-hero-copy-order: 1;
  --tc-hero-media-order: 2;
  --tc-document-columns: minmax(0, 1fr);
  --tc-toc-position: static;
  --tc-inline-nav-display: none;
  --tc-compact-nav-display: block;
  --tc-split-rule: none;
  --tc-split-inset: 0;
  --tc-heading-note-direction: column;
  --tc-specs-columns: minmax(0, 1fr);
  --tc-eis-wide-display: none;
  --tc-eis-stacked-display: block;
}

@media (min-width: 768px) {
  .tooo-site {
    --tc-type-display-size: 3rem;
    --tc-type-product-title-size: 2.5rem;
    --tc-type-product-lead-size: 1.75rem;
    --tc-type-section-size: 2rem;
    --tc-type-document-title-size: 2.25rem;
    --tc-type-subheading-size: 1.375rem;
    --tc-type-body-size: 1.125rem;
    --tc-type-compact-size: 1rem;
    --tc-type-caption-size: 0.875rem;
    --tc-type-control-size: 1rem;
    --tc-layout-gutter: 1.5rem;
    --tc-layout-grid-gap: 1.5rem;
    --tc-layout-section-gap: 3rem;
    --tc-layout-hero-gap: 2rem;
    --tc-layout-header-height: 4.5rem;
    --tc-layout-logo-width: 10rem;
    --tc-layout-footer-padding: 2rem;
    --tc-layout-table-cell-min-width: 0;
    --tc-layout-columns: 3;
    --tc-works-columns: minmax(0, 1fr);
    --tc-portrait-width: min(100%, var(--tc-layout-portrait-mobile-max-width));
    --tc-hero-columns: minmax(0, 1fr);
    --tc-hero-copy-order: 1;
    --tc-hero-media-order: 2;
    --tc-document-columns: minmax(0, 1fr);
    --tc-toc-position: static;
    --tc-inline-nav-display: flex;
    --tc-compact-nav-display: none;
    --tc-split-rule: none;
    --tc-split-inset: 0;
    --tc-heading-note-direction: row;
    --tc-specs-columns: minmax(0, 1fr) minmax(0, 3fr);
    --tc-eis-wide-display: block;
    --tc-eis-stacked-display: none;
  }
}

@media (min-width: 1024px) {
  .tooo-site {
    --tc-type-display-size: 3.5rem;
    --tc-type-product-title-size: 3rem;
    --tc-type-product-lead-size: 2rem;
    --tc-type-section-size: 2.25rem;
    --tc-type-document-title-size: 2.5rem;
    --tc-type-subheading-size: 1.5rem;
    --tc-type-body-size: 1.125rem;
    --tc-type-compact-size: 1rem;
    --tc-type-caption-size: 0.875rem;
    --tc-type-control-size: 1rem;
    --tc-layout-gutter: 3rem;
    --tc-layout-grid-gap: 1.5rem;
    --tc-layout-section-gap: 4rem;
    --tc-layout-hero-gap: 3rem;
    --tc-layout-header-height: 5rem;
    --tc-layout-logo-width: 11rem;
    --tc-layout-footer-padding: 2rem;
    --tc-layout-table-cell-min-width: 0;
    --tc-layout-columns: 3;
    --tc-works-columns: 20fr 9fr;
    --tc-portrait-width: 100%;
    --tc-hero-columns: minmax(0, 7fr) minmax(0, 5fr);
    --tc-hero-copy-order: 2;
    --tc-hero-media-order: 1;
    --tc-document-columns: var(--tc-layout-toc-width) minmax(0, 1fr);
    --tc-toc-position: sticky;
    --tc-inline-nav-display: flex;
    --tc-compact-nav-display: none;
    --tc-split-rule: var(--tc-stroke-divider) solid var(--tc-color-border);
    --tc-split-inset: var(--tc-layout-hero-gap);
    --tc-heading-note-direction: row;
    --tc-specs-columns: minmax(0, 1fr) minmax(0, 3fr);
    --tc-eis-wide-display: block;
    --tc-eis-stacked-display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooo-site {
    --tc-motion-fast: 0ms;
    --tc-motion-standard: 0ms;
    --tc-motion-overlay: 0ms;
  }
}