/* Generated from tokens.json (design/scripts: gen_tokens.py). Do not edit by hand. */
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  --yellow-50: hsl(53, 100%, 96%);
  --yellow-100: hsl(53, 100%, 90%);
  --yellow-200: hsl(53, 98%, 82%);
  --yellow-300: hsl(52, 97%, 74%);
  --yellow-400: hsl(52, 96%, 67%);
  --yellow-500: hsl(49, 94%, 55%);
  --yellow-600: hsl(45, 92%, 44%);
  --yellow-700: hsl(40, 90%, 33%);
  --yellow-800: hsl(36, 88%, 24%);
  --yellow-900: hsl(32, 82%, 15%);
  --grey-50: hsl(48, 40%, 97%);
  --grey-100: hsl(48, 28%, 93%);
  --grey-200: hsl(46, 18%, 86%);
  --grey-300: hsl(45, 12%, 74%);
  --grey-400: hsl(44, 8%, 58%);
  --grey-500: hsl(43, 8%, 44%);
  --grey-600: hsl(42, 10%, 34%);
  --grey-700: hsl(41, 13%, 23%);
  --grey-800: hsl(40, 16%, 14%);
  --grey-900: hsl(40, 22%, 8%);
  --green-100: hsl(140, 60%, 91%);
  --green-300: hsl(142, 55%, 62%);
  --green-500: hsl(144, 62%, 38%);
  --green-700: hsl(146, 66%, 25%);
  --green-900: hsl(148, 60%, 12%);
  --red-100: hsl(6, 95%, 94%);
  --red-300: hsl(6, 90%, 72%);
  --red-500: hsl(4, 74%, 50%);
  --red-700: hsl(2, 72%, 38%);
  --red-900: hsl(0, 60%, 16%);
  --white: hsl(0, 0%, 100%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --font-sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root, [data-theme="light"] {
  color-scheme: light;
  --ground: var(--yellow-400);
  --ground-shade: var(--yellow-600);
  --surface: var(--white);
  --surface-sunken: var(--grey-100);
  --surface-tint: var(--yellow-100);
  --line: var(--grey-200);
  --field-line: var(--grey-500);
  --ink: var(--grey-900);
  --ink-muted: var(--grey-600);
  --ink-subtle: var(--grey-500);
  --ground-ink-muted: var(--yellow-800);
  --action: var(--grey-900);
  --action-hover: var(--grey-700);
  --on-action: var(--white);
  --wash: hsla(40, 22%, 8%, 0.08);
  --phone: var(--grey-900);
  --on-phone: var(--grey-50);
  --on-phone-muted: var(--grey-300);
  --phone-live: var(--green-300);
  --live: var(--green-500);
  --success: var(--green-700);
  --success-soft: var(--green-100);
  --danger: var(--red-700);
  --on-danger: var(--white);
  --danger-soft: var(--red-100);
  --logo-plate: var(--yellow-400);
  --dial-stop: var(--grey-300);
  --shadow-flat-sm: 0 2px 0 hsl(45, 92%, 44%);
  --shadow-flat: 0 4px 0 hsl(45, 92%, 44%);
  --shadow-raised: 0 1px 3px hsla(40, 40%, 10%, 0.20), 0 16px 40px -8px hsla(40, 40%, 10%, 0.40);
  --shadow-inset: inset 0 2px 0 hsla(40, 22%, 8%, 0.06);
  --focus-ring: 0 0 0 2px hsl(0, 0%, 100%), 0 0 0 4px hsl(40, 22%, 8%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
    --ground: var(--grey-900);
    --ground-shade: var(--grey-800);
    --surface: var(--grey-800);
    --surface-sunken: var(--grey-700);
    --surface-tint: hsla(50, 32%, 21%, 1);
    --line: var(--grey-700);
    --field-line: var(--grey-400);
    --ink: var(--grey-50);
    --ink-muted: var(--grey-300);
    --ink-subtle: var(--grey-400);
    --ground-ink-muted: var(--grey-300);
    --action: var(--yellow-400);
    --action-hover: var(--yellow-300);
    --on-action: var(--grey-900);
    --wash: hsla(48, 40%, 97%, 0.10);
    --phone: var(--yellow-400);
    --on-phone: var(--grey-900);
    --on-phone-muted: var(--yellow-800);
    --phone-live: var(--green-700);
    --live: var(--green-300);
    --success: var(--green-300);
    --success-soft: var(--green-900);
    --danger: var(--red-300);
    --on-danger: var(--grey-900);
    --danger-soft: var(--red-900);
    --logo-plate: var(--yellow-400);
    --dial-stop: var(--grey-300);
    --shadow-flat-sm: 0 2px 0 hsl(40, 30%, 3%);
    --shadow-flat: 0 4px 0 hsl(40, 30%, 3%);
    --shadow-raised: 0 1px 3px hsla(0, 0%, 0%, 0.6), 0 16px 40px -8px hsla(0, 0%, 0%, 0.8);
    --shadow-inset: inset 0 2px 0 hsla(0, 0%, 0%, 0.25);
    --focus-ring: 0 0 0 2px hsl(40, 22%, 8%), 0 0 0 4px hsl(52, 96%, 67%);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--grey-900);
  --ground-shade: var(--grey-800);
  --surface: var(--grey-800);
  --surface-sunken: var(--grey-700);
  --surface-tint: hsla(50, 32%, 21%, 1);
  --line: var(--grey-700);
  --field-line: var(--grey-400);
  --ink: var(--grey-50);
  --ink-muted: var(--grey-300);
  --ink-subtle: var(--grey-400);
  --ground-ink-muted: var(--grey-300);
  --action: var(--yellow-400);
  --action-hover: var(--yellow-300);
  --on-action: var(--grey-900);
  --wash: hsla(48, 40%, 97%, 0.10);
  --phone: var(--yellow-400);
  --on-phone: var(--grey-900);
  --on-phone-muted: var(--yellow-800);
  --phone-live: var(--green-700);
  --live: var(--green-300);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --danger: var(--red-300);
  --on-danger: var(--grey-900);
  --danger-soft: var(--red-900);
  --logo-plate: var(--yellow-400);
  --dial-stop: var(--grey-300);
  --shadow-flat-sm: 0 2px 0 hsl(40, 30%, 3%);
  --shadow-flat: 0 4px 0 hsl(40, 30%, 3%);
  --shadow-raised: 0 1px 3px hsla(0, 0%, 0%, 0.6), 0 16px 40px -8px hsla(0, 0%, 0%, 0.8);
  --shadow-inset: inset 0 2px 0 hsla(0, 0%, 0%, 0.25);
  --focus-ring: 0 0 0 2px hsl(40, 22%, 8%), 0 0 0 4px hsl(52, 96%, 67%);
}
.text-display { font-family: var(--font-sans); font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.025em; }
.text-figure { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.01em; }
.text-title { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.015em; }
.text-heading { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.text-lead { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.text-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.text-body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 700; }
.text-small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.text-small-strong { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 700; }
.text-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; }