/* Generated by scripts/build-tokens.py from design-tokens/. Don't edit this file:
   change the token JSON and run the script again.
   tokens-sha256: 8dc72ffde998814cbe47edf96e7092f8eea66f2fe106a374a7b2ee69415ba727 */

:root {
  --palette-white: #FFFFFF;
  --palette-snow: #F9FAFC;
  --palette-paper: #F2F4F8;
  --palette-frost: #E7ECF4;
  --palette-mist-150: #E5EAF2;
  --palette-mist-200: #E2E5EB;
  --palette-slate-400: #979FAB;
  --palette-slate-500: #616B7B;
  --palette-night-500: #4A5567;
  --palette-night-700: #212E42;
  --palette-night-800: #101D32;
  --palette-night-850: #0D1A2F;
  --palette-navy: #00051C;
  --palette-hazard: #EA562A;
  --palette-hazard-600: #BF411A;
  --palette-green-400: #4ADE80;
  --palette-green-700: #15803D;
  --palette-red-300: #FF6B5E;
  --palette-red-800: #B02417;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 80px;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 999px;
  --border-width-hairline: 0.5px;
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  --border-width-heavy: 4px;
  --font-family-sans: "Archivo", system-ui, sans-serif;
  --font-family-mono: "Space Mono", ui-monospace, monospace;
  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --font-size-2xs: 10px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 44px;
  --font-size-4xl: 56px;
  --line-height-2xs: 12px;
  --line-height-xs: 16px;
  --line-height-sm: 20px;
  --line-height-md: 24px;
  --line-height-lg: 24px;
  --line-height-xl: 28px;
  --line-height-2xl: 36px;
  --line-height-3xl: 46px;
  --line-height-4xl: 56px;
  --letter-spacing-none: 0px;
  --letter-spacing-2xs: 1.6px;
  --letter-spacing-xs: 2.16px;
  --letter-spacing-sm: 0px;
  --letter-spacing-md: 0px;
  --letter-spacing-lg: -0.2px;
  --letter-spacing-xl: -0.36px;
  --letter-spacing-2xl: -0.64px;
  --letter-spacing-3xl: -0.88px;
  --letter-spacing-4xl: -1.68px;
  --duration-xs: 100ms;
  --duration-sm: 160ms;
  --duration-md: 240ms;
  --duration-lg: 360ms;
  --duration-xl: 560ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --opacity-disabled: 0.4;
  --opacity-pressed: 0.55;
  --opacity-pressed-fill: 0.85;
  --surface: #FFFFFF;
  --surface-sunken: #F2F4F8;
  --surface-muted: #E7ECF4;
  --surface-contrast: #0D1A2F;
  --surface-accent: #EA562A;
  --surface-accent-subtle: rgb(234 86 42 / 0.12);
  --surface-positive-subtle: rgb(21 128 61 / 0.1);
  --surface-negative-subtle: rgb(176 36 23 / 0.1);
  --ink: #0D1A2F;
  --ink-subtle: #616B7B;
  --ink-muted: #979FAB;
  --ink-accent: #EA562A;
  --ink-positive: #15803D;
  --ink-negative: #B02417;
  --on-accent: #FFFFFF;
  --on-contrast: #F9FAFC;
  --on-contrast-subtle: rgb(249 250 252 / 0.62);
  --on-contrast-positive: #4ADE80;
  --on-contrast-negative: #FF6B5E;
  --on-contrast-accent: #EA562A;
  --border: #E2E5EB;
  --border-accent: #EA562A;
  --border-on-contrast: rgb(249 250 252 / 0.18);
  --focus-ring: #EA562A;
  --layout-page-gutter: 16px;
  --layout-row-inset: 16px;
  --layout-row-gap: 12px;
  --layout-row-gap-min: 8px;
  --layout-label-inset: 20px;
  --layout-screen-top: 8px;
  --layout-section-gap: 24px;
  --layout-screen-bottom: 32px;
  --motion-readout: 240ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms;
  --size-tap-target: 44px;
  --size-button: 50px;
  --size-button-compact: 44px;
  --size-row: 52px;
  --size-row-large: 56px;
  --size-key: 58px;
  --size-chip: 40px;
  --size-stepper-segment-width: 47px;
  --size-stepper-segment-height: 32px;
  --size-stepper-divider: 18px;
  --size-caret-width: 3px;
  --size-caret-height: 50px;
  --size-toast-max-width: 320px;
}

/* Dark follows the system unless the page pins a theme with data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #101D32;
    --surface-sunken: #00051C;
    --surface-muted: #212E42;
    --surface-contrast: #E5EAF2;
    --surface-accent-subtle: rgb(234 86 42 / 0.22);
    --surface-positive-subtle: rgb(74 222 128 / 0.16);
    --surface-negative-subtle: rgb(255 107 94 / 0.18);
    --ink: #FFFFFF;
    --ink-subtle: rgb(231 236 244 / 0.6);
    --ink-muted: rgb(231 236 244 / 0.3);
    --ink-positive: #4ADE80;
    --ink-negative: #FF6B5E;
    --on-contrast: #00051C;
    --on-contrast-subtle: rgb(0 5 28 / 0.62);
    --on-contrast-positive: #15803D;
    --on-contrast-negative: #B02417;
    --on-contrast-accent: #BF411A;
    --border: rgb(74 85 103 / 0.9);
    --border-on-contrast: rgb(0 5 28 / 0.18);
  }
}

:root[data-theme="dark"] {
  --surface: #101D32;
  --surface-sunken: #00051C;
  --surface-muted: #212E42;
  --surface-contrast: #E5EAF2;
  --surface-accent-subtle: rgb(234 86 42 / 0.22);
  --surface-positive-subtle: rgb(74 222 128 / 0.16);
  --surface-negative-subtle: rgb(255 107 94 / 0.18);
  --ink: #FFFFFF;
  --ink-subtle: rgb(231 236 244 / 0.6);
  --ink-muted: rgb(231 236 244 / 0.3);
  --ink-positive: #4ADE80;
  --ink-negative: #FF6B5E;
  --on-contrast: #00051C;
  --on-contrast-subtle: rgb(0 5 28 / 0.62);
  --on-contrast-positive: #15803D;
  --on-contrast-negative: #B02417;
  --on-contrast-accent: #BF411A;
  --border: rgb(74 85 103 / 0.9);
  --border-on-contrast: rgb(0 5 28 / 0.18);
}

/* Section labels, field labels, toasts. */
.text-eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.333;
  letter-spacing: var(--letter-spacing-xs);
  text-transform: uppercase;
}

/* Small caps over a figure: the answer panel's stat tiles, the keypad's live panel. */
.text-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-2xs);
  text-transform: uppercase;
}

/* Machine-side notes: the line under a figure, a fee summary, a saved item's net. */
.text-caption {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.333;
  letter-spacing: var(--letter-spacing-none);
}

/* Caps without the eyebrow's spacing: quick actions, a picker row's detail. */
.text-tag {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.333;
  letter-spacing: var(--letter-spacing-none);
  text-transform: uppercase;
}

/* Amounts in an itemised list. */
.text-data {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.429;
  letter-spacing: var(--letter-spacing-none);
}

/* Token names and hex values. */
.text-code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.429;
  letter-spacing: var(--letter-spacing-none);
}

/* An empty state's title. */
.text-heading {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-lg);
}

/* A compact control's label: the fee-profile pill. */
.text-pill {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.429;
  letter-spacing: var(--letter-spacing-sm);
}

/* A number that matters. Tabular digits so columns never jitter. Apps set the size per use from font-size. */
.text-figure {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  line-height: 1.167;
  letter-spacing: var(--letter-spacing-xl);
  font-variant-numeric: tabular-nums;
}

/* A detail screen's title. */
.text-title {
  font-family: var(--font-family-system);
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.214;
  letter-spacing: var(--letter-spacing-none);
}

/* Running copy and row labels. */
.text-body {
  font-family: var(--font-family-system);
  font-size: 17px;
  font-weight: var(--font-weight-regular);
  line-height: 1.294;
  letter-spacing: var(--letter-spacing-none);
}

/* Button labels. */
.text-body-strong {
  font-family: var(--font-family-system);
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.294;
  letter-spacing: var(--letter-spacing-none);
}

/* Line labels in an itemised list. */
.text-subhead {
  font-family: var(--font-family-system);
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  line-height: 1.333;
  letter-spacing: var(--letter-spacing-none);
}

/* The total's label in an itemised list. */
.text-subhead-strong {
  font-family: var(--font-family-system);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.333;
  letter-spacing: var(--letter-spacing-none);
}

/* Helper copy under a card. */
.text-footnote {
  font-family: var(--font-family-system);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: 1.385;
  letter-spacing: var(--letter-spacing-none);
}

/* Keypad digits. Fixed size: the keys don't grow with text size. */
.text-key {
  font-family: var(--font-family-system);
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  line-height: 1.214;
  letter-spacing: var(--letter-spacing-none);
}

/* Small marks beside text: the disclosure chevron. */
.text-icon-small {
  font-family: var(--font-family-system);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-none);
}

/* Icons that sit in a row with body text, like a selected checkmark. */
.text-icon {
  font-family: var(--font-family-system);
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-none);
}

/* Icons inside a fixed-size control: stepper buttons, the dismiss button. Fixed size so they never outgrow the control. */
.text-icon-control {
  font-family: var(--font-family-system);
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-none);
}