/* Built by scripts/build-tokens.py from design/tokens.json. Do not edit; edit tokens.json and rebuild. */
:root {
  /* color.base */
  --color-base-white: #FFFFFF;
  --color-base-soft-black: #121212;
  --color-base-beige: #F1EDE4;
  --color-base-green: #F5F9F2;
  --color-base-purple: #F0ECF4;
  --color-base-pale-grey: #F3F4F6;
  --color-base-deep-grey: #384250;
  --color-base-line: #E3DDD0;
  /* color.role */
  --color-background: var(--color-base-white);
  --color-surface-warm: var(--color-base-beige);
  --color-surface-soft: var(--color-base-pale-grey);
  --color-text: var(--color-base-soft-black);
  --color-text-muted: var(--color-base-deep-grey);
  --color-line: var(--color-base-line);
  --color-edge: var(--color-base-soft-black);
  --color-accent: var(--color-base-soft-black);
  --color-accent-text: var(--color-base-white);
  --color-hover: var(--color-base-green);
  --color-feature: var(--color-base-purple);
  --color-feature-alt: var(--color-base-green);
  --color-inverse: var(--color-base-soft-black);
  --color-inverse-text: var(--color-base-white);
  --color-focus: var(--color-base-soft-black);
  --color-scrim: #12121266;
  /* color.status */
  --color-success: #2F6B45;
  --color-success-bg: #E8F1E3;
  --color-error: #A33B2B;
  --color-error-bg: #F7E6E1;
  --color-warning: #8A5A12;
  --color-warning-bg: #F8EFD9;
  --color-info: #5B4590;
  --color-info-bg: var(--color-base-purple);
  /* color.category */
  --color-category-orange: #9B4805;
  --color-category-orange-bg: #F1E5DC;
  --color-category-lilac: #9B6BCE;
  --color-category-lilac-bg: #F1EAF8;
  --color-category-green: #186A23;
  --color-category-green-bg: #DFEAE0;
  --color-category-blue: #5991ED;
  --color-category-blue-bg: #E8F0FC;
  --color-category-rose: #843B61;
  --color-category-rose-bg: #EEE4E9;
  /* font */
  --font-heading: "Laica", "Satoshi", "Georgia", serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
  --font-accent: "Estragon", "Laica", "Georgia", serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  /* type: size / line height, px; tracking in em */
  --type-display-size: 96px; --type-display-line: 104px; --type-display-tracking: -0.02em;
  --type-h1-size: 72px; --type-h1-line: 90px; --type-h1-tracking: -0.02em;
  --type-h2-size: 60px; --type-h2-line: 72px; --type-h2-tracking: -0.02em;
  --type-h3-size: 48px; --type-h3-line: 56px; --type-h3-tracking: -0.02em;
  --type-h4-size: 36px; --type-h4-line: 44px; --type-h4-tracking: -0.02em;
  --type-h5-size: 30px; --type-h5-line: 38px; --type-h5-tracking: 0em;
  --type-h6-size: 24px; --type-h6-line: 32px; --type-h6-tracking: 0em;
  --type-text-xl-size: 20px; --type-text-xl-line: 30px; --type-text-xl-tracking: 0em;
  --type-text-lg-size: 18px; --type-text-lg-line: 28px; --type-text-lg-tracking: 0em;
  --type-text-md-size: 16px; --type-text-md-line: 24px; --type-text-md-tracking: 0em;
  --type-text-sm-size: 14px; --type-text-sm-line: 20px; --type-text-sm-tracking: 0em;
  --type-text-xs-size: 12px; --type-text-xs-line: 18px; --type-text-xs-tracking: 0em;
  --type-eyebrow-size: 14px; --type-eyebrow-line: 20px; --type-eyebrow-tracking: 0.11em;
  /* space */
  --space-xxs: 2px; --space-xs: 4px; --space-sm: 6px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-2xl: 20px; --space-3xl: 24px; --space-4xl: 32px; --space-5xl: 40px; --space-6xl: 48px; --space-7xl: 64px; --space-8xl: 80px; --space-9xl: 96px; --space-10xl: 128px;
  /* radius */
  --radius-none: 0px; --radius-pill: 1000px; --radius-soft: 16px;
  /* size */
  --size-page: 1440px; --size-content: 1024px; --size-gutter-min: 20px; --size-gutter-max: 50px; --size-control-sm: 36px; --size-control-md: 40px; --size-control-lg: 48px; --size-touch: 44px; --size-logo-min: 20px; --size-dialog: 480px; --size-sheet: 440px;
  /* motion */
  --motion-fast: 150ms; --motion-base: 250ms; --motion-ease: cubic-bezier(.2, .8, .2, 1); --motion-toast: 5000ms; --motion-skeleton-delay: 300ms;
  /* shadow */
  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}
@media (max-width: 767px) {
  :root {
    --type-display-size: 56px; --type-display-line: 60px;
    --type-h1-size: 44px; --type-h1-line: 52px;
    --type-h2-size: 36px; --type-h2-line: 44px;
    --type-h3-size: 30px; --type-h3-line: 38px;
    --type-h4-size: 26px; --type-h4-line: 34px;
    --type-h5-size: 22px; --type-h5-line: 30px;
    --type-h6-size: 20px; --type-h6-line: 28px;
  }
}
/* The phone sizes inside a narrow container on a wide screen, such as a side sheet. */
.type-phone {
  --type-display-size: 56px; --type-display-line: 60px;
  --type-h1-size: 44px; --type-h1-line: 52px;
  --type-h2-size: 36px; --type-h2-line: 44px;
  --type-h3-size: 30px; --type-h3-line: 38px;
  --type-h4-size: 26px; --type-h4-line: 34px;
  --type-h5-size: 22px; --type-h5-line: 30px;
  --type-h6-size: 20px; --type-h6-line: 28px;
}
/* One class per type style, so a page sets a style rather than its four parts. */
.type-display { font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--type-display-size); line-height: var(--type-display-line); letter-spacing: var(--type-display-tracking); }
.type-h1 { font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-tracking); }
.type-h2 { font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-tracking); }
.type-h3 { font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-tracking); }
.type-h4 { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-tracking); }
.type-h5 { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--type-h5-size); line-height: var(--type-h5-line); letter-spacing: var(--type-h5-tracking); }
.type-h6 { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--type-h6-size); line-height: var(--type-h6-line); letter-spacing: var(--type-h6-tracking); }
.type-text-xl { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--type-text-xl-size); line-height: var(--type-text-xl-line); letter-spacing: var(--type-text-xl-tracking); }
.type-text-lg { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--type-text-lg-size); line-height: var(--type-text-lg-line); letter-spacing: var(--type-text-lg-tracking); }
.type-text-md { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--type-text-md-size); line-height: var(--type-text-md-line); letter-spacing: var(--type-text-md-tracking); }
.type-text-sm { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--type-text-sm-size); line-height: var(--type-text-sm-line); letter-spacing: var(--type-text-sm-tracking); }
.type-text-xs { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--type-text-xs-size); line-height: var(--type-text-xs-line); letter-spacing: var(--type-text-xs-tracking); }
.type-eyebrow { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-line); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; }