/* Hatchery tokens. Generated by scripts/build.py from tokens/*.tokens.json (DTCG 2025.10). Do not edit. */
/* Tier 1: raw values. Components must not use --hx-color-* or other tier 1 variables directly. */
:root {
  --hx-color-shell-2: oklch(0.9792 0.0113 80);
  --hx-color-shell-5: oklch(0.9474 0.0138 80);
  --hx-color-shell-8: oklch(0.9179 0.0159 80);
  --hx-color-shell-10: oklch(0.8985 0.0172 80);
  --hx-color-shell-15: oklch(0.8497 0.0202 80);
  --hx-color-shell-20: oklch(0.8062 0.0227 80);
  --hx-color-shell-25: oklch(0.7624 0.0249 80);
  --hx-color-shell-30: oklch(0.7180 0.0267 80);
  --hx-color-shell-40: oklch(0.6398 0.0292 80);
  --hx-color-shell-50: oklch(0.5655 0.0300 80);
  --hx-color-shell-60: oklch(0.4922 0.0292 80);
  --hx-color-shell-70: oklch(0.4224 0.0267 80);
  --hx-color-shell-75: oklch(0.3853 0.0249 80);
  --hx-color-shell-80: oklch(0.3466 0.0227 80);
  --hx-color-shell-85: oklch(0.3067 0.0202 80);
  --hx-color-shell-90: oklch(0.2612 0.0172 80);
  --hx-color-shell-95: oklch(0.2007 0.0138 80);
  --hx-color-blue-2: oklch(0.9789 0.0141 222);
  --hx-color-blue-5: oklch(0.9453 0.0211 222);
  --hx-color-blue-8: oklch(0.9165 0.0244 222);
  --hx-color-blue-10: oklch(0.8964 0.0264 222);
  --hx-color-blue-15: oklch(0.8490 0.0309 222);
  --hx-color-blue-20: oklch(0.8008 0.0348 222);
  --hx-color-blue-25: oklch(0.7581 0.0382 222);
  --hx-color-blue-30: oklch(0.7155 0.0410 222);
  --hx-color-blue-40: oklch(0.6359 0.0447 222);
  --hx-color-blue-50: oklch(0.5585 0.0460 222);
  --hx-color-blue-60: oklch(0.4869 0.0447 222);
  --hx-color-blue-70: oklch(0.4170 0.0410 222);
  --hx-color-blue-75: oklch(0.3814 0.0382 222);
  --hx-color-blue-80: oklch(0.3452 0.0348 222);
  --hx-color-blue-85: oklch(0.3043 0.0309 222);
  --hx-color-blue-90: oklch(0.2580 0.0264 222);
  --hx-color-blue-95: oklch(0.2012 0.0211 222);
  --hx-color-buff-2: oklch(0.9791 0.0174 77);
  --hx-color-buff-5: oklch(0.9479 0.0275 77);
  --hx-color-buff-8: oklch(0.9174 0.0318 77);
  --hx-color-buff-10: oklch(0.8996 0.0344 77);
  --hx-color-buff-15: oklch(0.8517 0.0403 77);
  --hx-color-buff-20: oklch(0.8062 0.0455 77);
  --hx-color-buff-25: oklch(0.7630 0.0498 77);
  --hx-color-buff-30: oklch(0.7191 0.0534 77);
  --hx-color-buff-40: oklch(0.6403 0.0583 77);
  --hx-color-buff-50: oklch(0.5648 0.0600 77);
  --hx-color-buff-60: oklch(0.4945 0.0583 77);
  --hx-color-buff-70: oklch(0.4233 0.0534 77);
  --hx-color-buff-75: oklch(0.3862 0.0498 77);
  --hx-color-buff-80: oklch(0.3485 0.0455 77);
  --hx-color-buff-85: oklch(0.3088 0.0403 77);
  --hx-color-buff-90: oklch(0.2629 0.0344 77);
  --hx-color-buff-95: oklch(0.2020 0.0275 77);
  --hx-font-family-archivo: Archivo, "Helvetica Neue", Arial, system-ui, sans-serif;
  --hx-font-weight-light: 300;
  --hx-font-weight-regular: 400;
  --hx-font-weight-medium: 500;
  --hx-font-weight-semibold: 600;
  --hx-font-size-10-5: 10.5px;
  --hx-font-size-12: 12px;
  --hx-font-size-12-5: 12.5px;
  --hx-font-size-14: 14px;
  --hx-font-size-15: 15px;
  --hx-font-size-17: 17px;
  --hx-font-size-20: 20px;
  --hx-font-size-24: 24px;
  --hx-font-size-26: 26px;
  --hx-font-size-28: 28px;
  --hx-font-size-44: 44px;
  --hx-font-size-48: 48px;
  --hx-font-size-72: 72px;
  --hx-font-line-height-solid: 1;
  --hx-font-line-height-tight: 1.08;
  --hx-font-line-height-snug: 1.2;
  --hx-font-line-height-normal: 1.3;
  --hx-font-line-height-relaxed: 1.45;
  --hx-font-line-height-reading: 1.55;
  --hx-font-width-normal: 100;
  --hx-font-width-data: 87;
  --hx-space-0: 0px;
  --hx-space-4: 4px;
  --hx-space-8: 8px;
  --hx-space-12: 12px;
  --hx-space-16: 16px;
  --hx-space-20: 20px;
  --hx-space-24: 24px;
  --hx-space-32: 32px;
  --hx-space-48: 48px;
  --hx-space-64: 64px;
  --hx-space-80: 80px;
  --hx-space-96: 96px;
  --hx-space-128: 128px;
  --hx-radius-none: 0px;
  --hx-radius-full: 9999px;
  --hx-border-width-hairline: 1px;
  --hx-border-width-strong: 2px;
  --hx-duration-0: 0ms;
  --hx-duration-8: 8ms;
  --hx-duration-60: 60ms;
  --hx-duration-80: 80ms;
  --hx-duration-120: 120ms;
  --hx-duration-160: 160ms;
  --hx-duration-200: 200ms;
  --hx-duration-250: 250ms;
  --hx-duration-350: 350ms;
  --hx-duration-400: 400ms;
  --hx-duration-480: 480ms;
  --hx-duration-600: 600ms;
  --hx-duration-800: 800ms;
  --hx-duration-900: 900ms;
  --hx-duration-1800: 1800ms;
  --hx-easing-build: cubic-bezier(0.3, 0.7, 0.2, 1);
  --hx-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --hx-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --hx-easing-linear: cubic-bezier(0, 0, 1, 1);
  --hx-angle-facet-turn: 210deg;
  --hx-angle-hover-turn: 90deg;
  --hx-angle-quarter: 90deg;
  --hx-size-facet-24: 24px;
  --hx-size-facet-36: 36px;
  --hx-size-facet-48: 48px;
  --hx-size-symbol-min: 10px;
  --hx-size-symbol-gapless-below: 16px;
  --hx-size-fold-mark: 14px;
  --hx-size-marker: 9px;
  --hx-size-target-min: 44px;
  --hx-size-column-min: 160px;
  --hx-size-column-text: 208px;
  --hx-breakpoint-tablet: 600px;
  --hx-breakpoint-desktop: 1024px;
  --hx-breakpoint-wide: 1440px;
}
@supports not (color: oklch(0 0 0)) {
:root {
  --hx-color-shell-2: #FCF7F0;
  --hx-color-shell-5: #F2EDE4;
  --hx-color-shell-8: #EAE3D8;
  --hx-color-shell-10: #E4DCD1;
  --hx-color-shell-15: #D5CCBF;
  --hx-color-shell-20: #C7BEB0;
  --hx-color-shell-25: #BAB0A0;
  --hx-color-shell-30: #ADA392;
  --hx-color-shell-40: #968A79;
  --hx-color-shell-50: #7F7462;
  --hx-color-shell-60: #6A5F4F;
  --hx-color-shell-70: #564C3D;
  --hx-color-shell-75: #4B4235;
  --hx-color-shell-80: #40382C;
  --hx-color-shell-85: #352E24;
  --hx-color-shell-90: #29241B;
  --hx-color-shell-95: #19160F;
  --hx-color-blue-2: #EEFBFF;
  --hx-color-blue-5: #DFF1F7;
  --hx-color-blue-8: #D3E7EF;
  --hx-color-blue-10: #CBE1E9;
  --hx-color-blue-15: #B8D2DC;
  --hx-color-blue-20: #A6C4CE;
  --hx-color-blue-25: #97B6C2;
  --hx-color-blue-30: #88A9B6;
  --hx-color-blue-40: #6D919F;
  --hx-color-blue-50: #567A88;
  --hx-color-blue-60: #436672;
  --hx-color-blue-70: #32515C;
  --hx-color-blue-75: #2B4851;
  --hx-color-blue-80: #243D46;
  --hx-color-blue-85: #1D333A;
  --hx-color-blue-90: #15272D;
  --hx-color-blue-95: #0B191D;
  --hx-color-buff-2: #FFF7EC;
  --hx-color-buff-5: #F8ECDA;
  --hx-color-buff-8: #F0E2CD;
  --hx-color-buff-10: #EBDBC5;
  --hx-color-buff-15: #DECBB2;
  --hx-color-buff-20: #D1BCA0;
  --hx-color-buff-25: #C4AF8F;
  --hx-color-buff-30: #B8A07F;
  --hx-color-buff-40: #A08864;
  --hx-color-buff-50: #8A724D;
  --hx-color-buff-60: #745D3B;
  --hx-color-buff-70: #5E4A2B;
  --hx-color-buff-75: #534124;
  --hx-color-buff-80: #48371E;
  --hx-color-buff-85: #3B2D18;
  --hx-color-buff-90: #2E2211;
  --hx-color-buff-95: #1E1508;
}
}

/* Tier 2: purpose tokens shared by all Hatchery themes */
:root {
  --hx-typography-display-family: var(--hx-font-family-brand);
  --hx-typography-display-weight: var(--hx-font-weight-light);
  --hx-typography-display-size: var(--hx-font-size-72);
  --hx-typography-display-line-height: var(--hx-font-line-height-solid);
  --hx-typography-display-tracking: -2.52px;
  --hx-typography-headline-family: var(--hx-font-family-brand);
  --hx-typography-headline-weight: var(--hx-font-weight-light);
  --hx-typography-headline-size: var(--hx-font-size-48);
  --hx-typography-headline-line-height: var(--hx-font-line-height-tight);
  --hx-typography-headline-tracking: -0.96px;
  --hx-typography-heading-family: var(--hx-font-family-reading);
  --hx-typography-heading-weight: var(--hx-font-weight-regular);
  --hx-typography-heading-size: var(--hx-font-size-28);
  --hx-typography-heading-line-height: var(--hx-font-line-height-snug);
  --hx-typography-heading-tracking: -0.42px;
  --hx-typography-subheading-family: var(--hx-font-family-reading);
  --hx-typography-subheading-weight: var(--hx-font-weight-semibold);
  --hx-typography-subheading-size: var(--hx-font-size-15);
  --hx-typography-subheading-line-height: var(--hx-font-line-height-normal);
  --hx-typography-subheading-tracking: 0px;
  --hx-typography-statement-family: var(--hx-font-family-brand);
  --hx-typography-statement-weight: var(--hx-font-weight-regular);
  --hx-typography-statement-size: var(--hx-font-size-26);
  --hx-typography-statement-line-height: var(--hx-font-line-height-snug);
  --hx-typography-statement-tracking: -0.26px;
  --hx-typography-body-family: var(--hx-font-family-reading);
  --hx-typography-body-weight: var(--hx-font-weight-regular);
  --hx-typography-body-size: var(--hx-font-size-17);
  --hx-typography-body-line-height: var(--hx-font-line-height-reading);
  --hx-typography-body-tracking: 0px;
  --hx-typography-body-print-family: var(--hx-font-family-reading);
  --hx-typography-body-print-weight: var(--hx-font-weight-regular);
  --hx-typography-body-print-size: var(--hx-font-size-14);
  --hx-typography-body-print-line-height: var(--hx-font-line-height-reading);
  --hx-typography-body-print-tracking: 0px;
  --hx-typography-small-family: var(--hx-font-family-reading);
  --hx-typography-small-weight: var(--hx-font-weight-regular);
  --hx-typography-small-size: var(--hx-font-size-14);
  --hx-typography-small-line-height: var(--hx-font-line-height-relaxed);
  --hx-typography-small-tracking: 0px;
  --hx-typography-caption-family: var(--hx-font-family-reading);
  --hx-typography-caption-weight: var(--hx-font-weight-medium);
  --hx-typography-caption-size: var(--hx-font-size-12);
  --hx-typography-caption-line-height: var(--hx-font-line-height-relaxed);
  --hx-typography-caption-tracking: 0px;
  --hx-typography-caption-print-family: var(--hx-font-family-reading);
  --hx-typography-caption-print-weight: var(--hx-font-weight-medium);
  --hx-typography-caption-print-size: var(--hx-font-size-10-5);
  --hx-typography-caption-print-line-height: var(--hx-font-line-height-relaxed);
  --hx-typography-caption-print-tracking: 0px;
  --hx-typography-data-family: var(--hx-font-family-reading);
  --hx-typography-data-weight: var(--hx-font-weight-regular);
  --hx-typography-data-size: var(--hx-font-size-14);
  --hx-typography-data-line-height: var(--hx-font-line-height-normal);
  --hx-typography-data-tracking: 0px;
  --hx-typography-data-stretch: 87%;
  --hx-typography-data-numerals: tabular-nums;
  --hx-typography-data-print-family: var(--hx-font-family-reading);
  --hx-typography-data-print-weight: var(--hx-font-weight-regular);
  --hx-typography-data-print-size: var(--hx-font-size-12-5);
  --hx-typography-data-print-line-height: var(--hx-font-line-height-normal);
  --hx-typography-data-print-tracking: 0px;
  --hx-typography-data-print-stretch: 87%;
  --hx-typography-data-print-numerals: tabular-nums;
  --hx-typography-key-figure-family: var(--hx-font-family-brand);
  --hx-typography-key-figure-weight: var(--hx-font-weight-light);
  --hx-typography-key-figure-size: var(--hx-font-size-44);
  --hx-typography-key-figure-line-height: var(--hx-font-line-height-solid);
  --hx-typography-key-figure-tracking: -1.32px;
  --hx-typography-key-figure-numerals: tabular-nums;
  --hx-typography-key-figure-print-family: var(--hx-font-family-brand);
  --hx-typography-key-figure-print-weight: var(--hx-font-weight-regular);
  --hx-typography-key-figure-print-size: var(--hx-font-size-24);
  --hx-typography-key-figure-print-line-height: var(--hx-font-line-height-snug);
  --hx-typography-key-figure-print-tracking: -0.48px;
  --hx-typography-key-figure-print-numerals: tabular-nums;
  --hx-weight-regular: var(--hx-font-weight-regular);
  --hx-weight-emphasis: var(--hx-font-weight-medium);
  --hx-weight-strong: var(--hx-font-weight-semibold);
  --hx-font-family-brand: var(--hx-font-family-archivo);
  --hx-font-family-reading: var(--hx-font-family-archivo);
  --hx-font-family-hatchery: var(--hx-font-family-archivo);
  --hx-space-gap-tight: var(--hx-space-8);
  --hx-space-gap: var(--hx-space-16);
  --hx-space-gap-loose: var(--hx-space-24);
  --hx-space-section: var(--hx-space-48);
  --hx-space-section-loose: var(--hx-space-96);
  --hx-space-inset-panel: var(--hx-space-32);
  --hx-space-inset-panel-compact: var(--hx-space-20);
  --hx-space-inset-control: var(--hx-space-12);
  --hx-space-inset-panel-print: var(--hx-space-16);
  --hx-space-cell: var(--hx-space-8);
  --hx-space-cell-print: var(--hx-space-4);
  --hx-radius-surface: var(--hx-radius-none);
  --hx-radius-control: var(--hx-radius-none);
  --hx-radius-mark: var(--hx-radius-none);
  --hx-border-rule-width: var(--hx-border-width-hairline);
  --hx-border-focus-width: var(--hx-border-width-strong);
  --hx-border-focus-offset: var(--hx-space-4);
  --hx-motion-build-duration: var(--hx-duration-800);
  --hx-motion-build-delay: var(--hx-duration-0);
  --hx-motion-build-easing: var(--hx-easing-build);
  --hx-motion-build-stagger-column: var(--hx-duration-60);
  --hx-motion-build-stagger-row: var(--hx-duration-8);
  --hx-motion-build-jitter: var(--hx-duration-80);
  --hx-motion-build-stagger-panel: var(--hx-duration-400);
  --hx-motion-build-turn: var(--hx-angle-facet-turn);
  --hx-motion-build-scale-from: 0;
  --hx-motion-enter-duration: var(--hx-duration-250);
  --hx-motion-enter-delay: var(--hx-duration-0);
  --hx-motion-enter-easing: var(--hx-easing-standard);
  --hx-motion-exit-duration: var(--hx-duration-480);
  --hx-motion-exit-delay: var(--hx-duration-0);
  --hx-motion-exit-easing: var(--hx-easing-exit);
  --hx-motion-hover-duration: var(--hx-duration-160);
  --hx-motion-hover-delay: var(--hx-duration-0);
  --hx-motion-hover-easing: var(--hx-easing-standard);
  --hx-motion-hover-turn: var(--hx-angle-hover-turn);
  --hx-motion-endorse-duration: var(--hx-duration-160);
  --hx-motion-endorse-delay: var(--hx-duration-0);
  --hx-motion-endorse-easing: var(--hx-easing-standard);
  --hx-motion-press-duration: var(--hx-duration-120);
  --hx-motion-press-delay: var(--hx-duration-0);
  --hx-motion-press-easing: var(--hx-easing-standard);
  --hx-motion-fade-duration: var(--hx-duration-200);
  --hx-motion-fade-delay: var(--hx-duration-0);
  --hx-motion-fade-easing: var(--hx-easing-linear);
  --hx-motion-ambient-delay: var(--hx-duration-600);
  --hx-motion-ambient-interval-min: var(--hx-duration-350);
  --hx-motion-ambient-interval-max: var(--hx-duration-900);
  --hx-motion-ambient-batch-max: 3;
  --hx-motion-ambient-angle: var(--hx-angle-quarter);
  --hx-motion-ambient-speck-share: 0.6;
  --hx-motion-ambient-dark-share: 0.3;
  --hx-sound-signature-file: "signature.m4a";
  --hx-sound-signature: 0.8;
  --hx-sound-tap-file: "tap.m4a";
  --hx-sound-tap: 0.4;
  --hx-sound-open-file: "open.m4a";
  --hx-sound-open: 0.5;
  --hx-sound-confirm-file: "confirm.m4a";
  --hx-sound-confirm: 0.5;
  --hx-sound-notice-file: "notice.m4a";
  --hx-sound-notice: 0.5;
  --hx-sound-endorse-file: "endorse.m4a";
  --hx-sound-endorse: 0.5;
  --hx-layout-columns: 12;
  --hx-layout-gutter: var(--hx-space-24);
  --hx-layout-gutter-print: 19px;
  --hx-layout-margin-phone: var(--hx-space-20);
  --hx-layout-margin-tablet: var(--hx-space-48);
  --hx-layout-margin-desktop: var(--hx-space-80);
  --hx-layout-margin-fluid: 5;
  --hx-layout-margin-print: 57px;
  --hx-layout-margin-print-block: var(--hx-space-32);
  --hx-layout-measure: 72ch;
  --hx-layout-panel-fractions: 0.125;
  --hx-layout-facet-size: var(--hx-size-facet-36);
  --hx-layout-facet-size-phone: var(--hx-size-facet-24);
  --hx-layout-facet-size-product: var(--hx-size-facet-48);
  --hx-layout-target-min: var(--hx-size-target-min);
  --hx-layout-column-min: var(--hx-size-column-min);
  --hx-layout-column-text: var(--hx-size-column-text);
  --hx-layout-fold-mark: var(--hx-size-fold-mark);
  --hx-layout-marker: var(--hx-size-marker);
  --hx-layout-symbol-min: var(--hx-size-symbol-min);
  --hx-layout-symbol-gapless-below: var(--hx-size-symbol-gapless-below);
  --hx-layout-breakpoint-tablet: var(--hx-breakpoint-tablet);
  --hx-layout-breakpoint-desktop: var(--hx-breakpoint-desktop);
  --hx-layout-breakpoint-wide: var(--hx-breakpoint-wide);
  --hx-layout-film-aspect: 1.7778;
  --hx-layout-page-max: var(--hx-breakpoint-wide);
  --hx-layout-display-fluid: 9;
  --hx-layout-ambient-clear: var(--hx-space-24);
  --hx-layout-band-block: var(--hx-space-24);
}

/* Tier 2 and 3, light (default) */
:root, [data-theme="light"] {
  --hx-surface-base-bg: var(--hx-color-shell-5);
  --hx-surface-base-text: var(--hx-color-shell-95);
  --hx-surface-base-muted: var(--hx-color-shell-60);
  --hx-surface-base-rule: var(--hx-color-shell-15);
  --hx-surface-base-rule-strong: var(--hx-color-shell-95);
  --hx-surface-base-focus: var(--hx-color-shell-95);
  --hx-surface-sunken-bg: var(--hx-color-shell-10);
  --hx-surface-sunken-text: var(--hx-color-shell-95);
  --hx-surface-sunken-muted: var(--hx-color-shell-60);
  --hx-surface-sunken-rule: var(--hx-color-shell-20);
  --hx-surface-sunken-rule-strong: var(--hx-color-shell-95);
  --hx-surface-sunken-focus: var(--hx-color-shell-95);
  --hx-surface-raised-bg: var(--hx-color-shell-2);
  --hx-surface-raised-text: var(--hx-color-shell-95);
  --hx-surface-raised-muted: var(--hx-color-shell-60);
  --hx-surface-raised-rule: var(--hx-color-shell-15);
  --hx-surface-raised-rule-strong: var(--hx-color-shell-95);
  --hx-surface-raised-focus: var(--hx-color-shell-95);
  --hx-surface-feature-bg: var(--hx-color-blue-20);
  --hx-surface-feature-text: var(--hx-color-shell-95);
  --hx-surface-feature-muted: var(--hx-color-shell-80);
  --hx-surface-feature-rule: var(--hx-color-blue-30);
  --hx-surface-feature-rule-strong: var(--hx-color-shell-95);
  --hx-surface-feature-focus: var(--hx-color-shell-95);
  --hx-surface-media-bg: var(--hx-color-buff-15);
  --hx-surface-media-text: var(--hx-color-shell-95);
  --hx-surface-media-muted: var(--hx-color-shell-70);
  --hx-surface-media-rule: var(--hx-color-buff-30);
  --hx-surface-media-rule-strong: var(--hx-color-shell-95);
  --hx-surface-media-focus: var(--hx-color-shell-95);
  --hx-surface-inverse-bg: var(--hx-color-shell-95);
  --hx-surface-inverse-text: var(--hx-color-shell-5);
  --hx-surface-inverse-muted: var(--hx-color-shell-30);
  --hx-surface-inverse-rule: var(--hx-color-shell-80);
  --hx-surface-inverse-rule-strong: var(--hx-color-shell-5);
  --hx-surface-inverse-focus: var(--hx-color-shell-5);
  --hx-status-proceed: var(--hx-color-shell-95);
  --hx-status-hold: var(--hx-color-buff-30);
  --hx-action-primary: var(--hx-color-shell-95);
  --hx-action-primary-hover: var(--hx-color-shell-80);
  --hx-action-primary-text: var(--hx-color-shell-5);
  --hx-action-quiet-hover: var(--hx-color-shell-10);
  --hx-action-disabled: var(--hx-color-shell-15);
  --hx-action-disabled-text: var(--hx-color-shell-50);
  --hx-brand-mark-primary: var(--hx-color-shell-95);
  --hx-brand-mark-secondary: var(--hx-color-blue-20);
  --hx-brand-fold-mark: var(--hx-color-buff-30);
  --hx-facet-field-base-tone-1: var(--hx-color-shell-5);
  --hx-facet-field-base-tone-2: var(--hx-color-shell-8);
  --hx-facet-field-base-tone-3: var(--hx-color-buff-5);
  --hx-facet-field-base-speckle-1: var(--hx-color-buff-15);
  --hx-facet-field-base-speckle-2: var(--hx-color-blue-20);
  --hx-facet-field-feature-tone-1: var(--hx-color-blue-20);
  --hx-facet-field-feature-tone-2: var(--hx-color-blue-25);
  --hx-facet-field-feature-tone-3: var(--hx-color-blue-15);
  --hx-facet-field-feature-speckle-1: var(--hx-color-shell-5);
  --hx-facet-field-feature-speckle-2: var(--hx-color-blue-10);
  --hx-facet-field-media-tone-1: var(--hx-color-buff-15);
  --hx-facet-field-media-tone-2: var(--hx-color-buff-20);
  --hx-facet-field-media-tone-3: var(--hx-color-buff-10);
  --hx-facet-field-media-speckle-1: var(--hx-color-shell-5);
  --hx-facet-field-media-speckle-2: var(--hx-color-blue-20);
  --hx-facet-field-speckle-rate: 0.08;
}

/* Dark: products only. Opt in with data-theme="dark", or data-hx-auto-dark to follow the OS. */
[data-theme="dark"] {
  --hx-surface-base-bg: var(--hx-color-shell-95);
  --hx-surface-base-text: var(--hx-color-shell-5);
  --hx-surface-base-muted: var(--hx-color-shell-30);
  --hx-surface-base-rule: var(--hx-color-shell-80);
  --hx-surface-base-rule-strong: var(--hx-color-shell-5);
  --hx-surface-base-focus: var(--hx-color-shell-5);
  --hx-surface-sunken-bg: var(--hx-color-shell-95);
  --hx-surface-sunken-text: var(--hx-color-shell-5);
  --hx-surface-sunken-muted: var(--hx-color-shell-30);
  --hx-surface-sunken-rule: var(--hx-color-shell-85);
  --hx-surface-sunken-rule-strong: var(--hx-color-shell-5);
  --hx-surface-sunken-focus: var(--hx-color-shell-5);
  --hx-surface-raised-bg: var(--hx-color-shell-90);
  --hx-surface-raised-text: var(--hx-color-shell-5);
  --hx-surface-raised-muted: var(--hx-color-shell-30);
  --hx-surface-raised-rule: var(--hx-color-shell-80);
  --hx-surface-raised-rule-strong: var(--hx-color-shell-5);
  --hx-surface-raised-focus: var(--hx-color-shell-5);
  --hx-surface-feature-bg: var(--hx-color-blue-80);
  --hx-surface-feature-text: var(--hx-color-shell-5);
  --hx-surface-feature-muted: var(--hx-color-blue-10);
  --hx-surface-feature-rule: var(--hx-color-blue-70);
  --hx-surface-feature-rule-strong: var(--hx-color-shell-5);
  --hx-surface-feature-focus: var(--hx-color-shell-5);
  --hx-surface-media-bg: var(--hx-color-buff-80);
  --hx-surface-media-text: var(--hx-color-shell-5);
  --hx-surface-media-muted: var(--hx-color-buff-15);
  --hx-surface-media-rule: var(--hx-color-buff-70);
  --hx-surface-media-rule-strong: var(--hx-color-shell-5);
  --hx-surface-media-focus: var(--hx-color-shell-5);
  --hx-surface-inverse-bg: var(--hx-color-shell-5);
  --hx-surface-inverse-text: var(--hx-color-shell-95);
  --hx-surface-inverse-muted: var(--hx-color-shell-60);
  --hx-surface-inverse-rule: var(--hx-color-shell-15);
  --hx-surface-inverse-rule-strong: var(--hx-color-shell-95);
  --hx-surface-inverse-focus: var(--hx-color-shell-95);
  --hx-status-proceed: var(--hx-color-shell-5);
  --hx-status-hold: var(--hx-color-buff-30);
  --hx-action-primary: var(--hx-color-shell-5);
  --hx-action-primary-hover: var(--hx-color-shell-20);
  --hx-action-primary-text: var(--hx-color-shell-95);
  --hx-action-quiet-hover: var(--hx-color-shell-85);
  --hx-action-disabled: var(--hx-color-shell-80);
  --hx-action-disabled-text: var(--hx-color-shell-50);
  --hx-brand-mark-primary: var(--hx-color-shell-5);
  --hx-brand-mark-secondary: var(--hx-color-blue-20);
  --hx-brand-fold-mark: var(--hx-color-buff-30);
  --hx-facet-field-base-tone-1: var(--hx-color-shell-95);
  --hx-facet-field-base-tone-2: var(--hx-color-shell-90);
  --hx-facet-field-base-tone-3: var(--hx-color-shell-85);
  --hx-facet-field-base-speckle-1: var(--hx-color-buff-80);
  --hx-facet-field-base-speckle-2: var(--hx-color-blue-80);
  --hx-facet-field-feature-tone-1: var(--hx-color-blue-80);
  --hx-facet-field-feature-tone-2: var(--hx-color-blue-75);
  --hx-facet-field-feature-tone-3: var(--hx-color-blue-85);
  --hx-facet-field-feature-speckle-1: var(--hx-color-blue-70);
  --hx-facet-field-feature-speckle-2: var(--hx-color-shell-85);
  --hx-facet-field-media-tone-1: var(--hx-color-buff-80);
  --hx-facet-field-media-tone-2: var(--hx-color-buff-75);
  --hx-facet-field-media-tone-3: var(--hx-color-buff-85);
  --hx-facet-field-media-speckle-1: var(--hx-color-shell-85);
  --hx-facet-field-media-speckle-2: var(--hx-color-blue-80);
  --hx-facet-field-speckle-rate: 0.08;
}
@media (prefers-color-scheme: dark) {
  :root[data-hx-auto-dark]:not([data-theme="light"]) {
    --hx-surface-base-bg: var(--hx-color-shell-95);
    --hx-surface-base-text: var(--hx-color-shell-5);
    --hx-surface-base-muted: var(--hx-color-shell-30);
    --hx-surface-base-rule: var(--hx-color-shell-80);
    --hx-surface-base-rule-strong: var(--hx-color-shell-5);
    --hx-surface-base-focus: var(--hx-color-shell-5);
    --hx-surface-sunken-bg: var(--hx-color-shell-95);
    --hx-surface-sunken-text: var(--hx-color-shell-5);
    --hx-surface-sunken-muted: var(--hx-color-shell-30);
    --hx-surface-sunken-rule: var(--hx-color-shell-85);
    --hx-surface-sunken-rule-strong: var(--hx-color-shell-5);
    --hx-surface-sunken-focus: var(--hx-color-shell-5);
    --hx-surface-raised-bg: var(--hx-color-shell-90);
    --hx-surface-raised-text: var(--hx-color-shell-5);
    --hx-surface-raised-muted: var(--hx-color-shell-30);
    --hx-surface-raised-rule: var(--hx-color-shell-80);
    --hx-surface-raised-rule-strong: var(--hx-color-shell-5);
    --hx-surface-raised-focus: var(--hx-color-shell-5);
    --hx-surface-feature-bg: var(--hx-color-blue-80);
    --hx-surface-feature-text: var(--hx-color-shell-5);
    --hx-surface-feature-muted: var(--hx-color-blue-10);
    --hx-surface-feature-rule: var(--hx-color-blue-70);
    --hx-surface-feature-rule-strong: var(--hx-color-shell-5);
    --hx-surface-feature-focus: var(--hx-color-shell-5);
    --hx-surface-media-bg: var(--hx-color-buff-80);
    --hx-surface-media-text: var(--hx-color-shell-5);
    --hx-surface-media-muted: var(--hx-color-buff-15);
    --hx-surface-media-rule: var(--hx-color-buff-70);
    --hx-surface-media-rule-strong: var(--hx-color-shell-5);
    --hx-surface-media-focus: var(--hx-color-shell-5);
    --hx-surface-inverse-bg: var(--hx-color-shell-5);
    --hx-surface-inverse-text: var(--hx-color-shell-95);
    --hx-surface-inverse-muted: var(--hx-color-shell-60);
    --hx-surface-inverse-rule: var(--hx-color-shell-15);
    --hx-surface-inverse-rule-strong: var(--hx-color-shell-95);
    --hx-surface-inverse-focus: var(--hx-color-shell-95);
    --hx-status-proceed: var(--hx-color-shell-5);
    --hx-status-hold: var(--hx-color-buff-30);
    --hx-action-primary: var(--hx-color-shell-5);
    --hx-action-primary-hover: var(--hx-color-shell-20);
    --hx-action-primary-text: var(--hx-color-shell-95);
    --hx-action-quiet-hover: var(--hx-color-shell-85);
    --hx-action-disabled: var(--hx-color-shell-80);
    --hx-action-disabled-text: var(--hx-color-shell-50);
    --hx-brand-mark-primary: var(--hx-color-shell-5);
    --hx-brand-mark-secondary: var(--hx-color-blue-20);
    --hx-brand-fold-mark: var(--hx-color-buff-30);
    --hx-facet-field-base-tone-1: var(--hx-color-shell-95);
    --hx-facet-field-base-tone-2: var(--hx-color-shell-90);
    --hx-facet-field-base-tone-3: var(--hx-color-shell-85);
    --hx-facet-field-base-speckle-1: var(--hx-color-buff-80);
    --hx-facet-field-base-speckle-2: var(--hx-color-blue-80);
    --hx-facet-field-feature-tone-1: var(--hx-color-blue-80);
    --hx-facet-field-feature-tone-2: var(--hx-color-blue-75);
    --hx-facet-field-feature-tone-3: var(--hx-color-blue-85);
    --hx-facet-field-feature-speckle-1: var(--hx-color-blue-70);
    --hx-facet-field-feature-speckle-2: var(--hx-color-shell-85);
    --hx-facet-field-media-tone-1: var(--hx-color-buff-80);
    --hx-facet-field-media-tone-2: var(--hx-color-buff-75);
    --hx-facet-field-media-tone-3: var(--hx-color-buff-85);
    --hx-facet-field-media-speckle-1: var(--hx-color-shell-85);
    --hx-facet-field-media-speckle-2: var(--hx-color-blue-80);
    --hx-facet-field-speckle-rate: 0.08;
  }
}

/* Reduced motion: from the OS setting, or forced with data-motion="reduced" */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hx-motion-build-duration: var(--hx-duration-200);
    --hx-motion-build-delay: var(--hx-duration-0);
    --hx-motion-build-easing: var(--hx-easing-linear);
    --hx-motion-build-stagger-column: var(--hx-duration-0);
    --hx-motion-build-stagger-row: var(--hx-duration-0);
    --hx-motion-build-jitter: var(--hx-duration-0);
    --hx-motion-build-turn: 0;
    --hx-motion-build-scale-from: 1;
    --hx-motion-hover-turn: 0;
    --hx-motion-exit-duration: var(--hx-duration-200);
    --hx-motion-exit-delay: var(--hx-duration-0);
    --hx-motion-exit-easing: var(--hx-easing-linear);
    --hx-motion-ambient-batch-max: 0;
  }
}
[data-motion="reduced"] {
  --hx-motion-build-duration: var(--hx-duration-200);
  --hx-motion-build-delay: var(--hx-duration-0);
  --hx-motion-build-easing: var(--hx-easing-linear);
  --hx-motion-build-stagger-column: var(--hx-duration-0);
  --hx-motion-build-stagger-row: var(--hx-duration-0);
  --hx-motion-build-jitter: var(--hx-duration-0);
  --hx-motion-build-turn: 0;
  --hx-motion-build-scale-from: 1;
  --hx-motion-hover-turn: 0;
  --hx-motion-exit-duration: var(--hx-duration-200);
  --hx-motion-exit-delay: var(--hx-duration-0);
  --hx-motion-exit-easing: var(--hx-easing-linear);
  --hx-motion-ambient-batch-max: 0;
}