/* Generated by scripts/design-tokens.mjs. Edit tokens.json or marketing.tokens.json, then run npm run tokens:generate. */

@font-face { font-family: "Overpass"; src: url("./fonts/Overpass-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Overpass Mono"; src: url("./fonts/OverpassMono-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root, [data-theme="dark"] {
  --asphalt: #0f110e;
  --paint: #eceee6;
  --sign-green: #0b6b4a;
  --surface: var(--asphalt);
  --surface-raised: #191c18;
  --line: #2d322b;
  --line-strong: #646c60;
  --ink: var(--paint);
  --ink-muted: #9aa195;
  --signal: #3de6ac;
  --on-signal: var(--asphalt);
  --signal-text: var(--signal);
  --signal-soft: #112b21;
  --amber: #f2b33d;
  --amber-soft: #2e230c;
  --stop: #ff7b68;
  --stop-soft: #36160f;
  --shadow-float: 0 8px 24px #000000a6, 0 0 0 1px #2d322b;
  --focus-ring: 0 0 0 2px #0f110e, 0 0 0 4px #3de6ac;
}

[data-theme="light"] {
  --asphalt: #0f110e;
  --paint: #eceee6;
  --sign-green: #0b6b4a;
  --surface: #f2f1eb;
  --surface-raised: #ffffff;
  --line: #d6d7cd;
  --line-strong: #868c81;
  --ink: #12140f;
  --ink-muted: #585e53;
  --signal: #3de6ac;
  --on-signal: var(--asphalt);
  --signal-text: #07704c;
  --signal-soft: #d4f5e7;
  --amber: #875500;
  --amber-soft: #fbeacb;
  --stop: #b0261d;
  --stop-soft: #fbe0da;
  --shadow-float: 0 8px 24px #12140f24, 0 0 0 1px #d6d7cd;
  --focus-ring: 0 0 0 2px #f2f1eb, 0 0 0 4px #07704c;
}

:root {
  --font-sans: "Overpass", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-30: 120px;
  --space-35: 140px;
  --space-50: 200px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --type-display-size: 56px;
  --type-display-leading: 56px;
  --type-display-weight: 800;
  --type-display-tracking: -0.02em;
  --type-title-size: 28px;
  --type-title-leading: 32px;
  --type-title-weight: 800;
  --type-title-tracking: -0.01em;
  --type-heading-size: 18px;
  --type-heading-leading: 24px;
  --type-heading-weight: 700;
  --type-body-size: 15px;
  --type-body-leading: 22px;
  --type-body-weight: 400;
  --type-label-size: 12px;
  --type-label-leading: 16px;
  --type-label-weight: 700;
  --type-label-tracking: 0.08em;
  --type-numeral-size: 32px;
  --type-numeral-leading: 32px;
  --type-numeral-weight: 600;
  --type-numeral-tracking: -0.02em;
  --type-code-size: 13px;
  --type-code-leading: 20px;
  --type-code-weight: 400;
}

/* Marketing roles extend the supplied product tokens. */
:root {
  --page-gutter: clamp(var(--space-4), 4vw, var(--space-12));
  --section-space: clamp(var(--space-30), 13vw, var(--space-50));
  --hero-space: clamp(var(--space-10), 6vw, var(--space-22));
  --queue-space: clamp(var(--space-10), 5vw, var(--space-18));
  --queue-padding: clamp(var(--space-5), 3vw, var(--space-10));
  --heading-space: clamp(var(--space-10), 5vw, var(--space-16));
  --signal-section-padding: clamp(var(--space-20), 10vw, var(--space-35));
  --table-heading-space: clamp(var(--space-9), 4vw, var(--space-14));
  --cta-padding: clamp(var(--space-8), 5vw, var(--space-18));
  --footer-space: clamp(var(--space-12), 6vw, var(--space-20));
  --calculator-padding: clamp(var(--space-6), 3vw, var(--space-10));
  --space-5-half: calc(var(--space-1) * 5.5);
  --space-4-half: calc(var(--space-1) * 4.5);
  --space-7-half: calc(var(--space-1) * 7.5);
  --space-6-half: calc(var(--space-1) * 6.5);
  --space-3-half: calc(var(--space-1) * 3.5);
  --timeline-row-padding: 13px;
  --optical-dot-offset: calc(var(--space-1) + 1px);
  --space-1-half: calc(var(--space-1) * 1.5);
  --chip-padding-end: calc(var(--space-2) + 1px);
  --space-2-half: calc(var(--space-1) * 2.5);
  --text-section: clamp(40px, 5.4vw, 80px);
  --text-lead: clamp(19px, 1.7vw, 24px);
  --text-home: clamp(56px, 8.6vw, 136px);
  --text-table-price: clamp(36px, 4vw, 56px);
  --text-pricing: clamp(48px, 5.8vw, 92px);
  --text-quote: clamp(56px, 6vw, 88px);
  --text-utility: clamp(40px, 6vw, 80px);
  --text-cta-mobile: clamp(32px, 9.4vw, 40px);
  --text-pricing-mobile: clamp(44px, 12.3vw, 59px);
  --text-signal-mobile: clamp(34px, 10vw, 40px);
  --text-pricing-intro: clamp(40px, 5.4vw, 72px);
  --text-26: 26px;
  --text-20: 20px;
  --text-17: 17px;
  --text-18: var(--type-heading-size);
  --text-16: 16px;
  --text-15: var(--type-body-size);
  --text-13: var(--type-code-size);
  --text-19: 19px;
  --text-14: 14px;
  --text-12: var(--type-label-size);
  --text-22: 22px;
  --text-32: var(--type-numeral-size);
  --text-40: 40px;
  --text-30: 30px;
  --leading-30: 30px;
  --leading-31: 31px;
  --leading-28: 28px;
  --leading-24: var(--type-heading-leading);
  --leading-20: var(--type-code-leading);
  --leading-16: var(--type-label-leading);
  --leading-25: 25px;
  --leading-27: 27px;
  --leading-21: 21px;
  --leading-26: 26px;
  --leading-44: var(--control-height-compact);
  --weight-extrabold: var(--type-display-weight);
  --weight-medium: 500;
  --weight-bold: var(--type-heading-weight);
  --weight-semibold: var(--type-numeral-weight);
  --queue-head-halo: 0 0 0 7px color-mix(in srgb, var(--signal) 22%, transparent);
  --focus-width: 3px;
  --motion-disclosure: 160ms;
  --opacity-disabled: 0.45;
  --content-width: 1240px;
  --comparison-min-width: 760px;
  --pricing-strip-min-width: 640px;
  --control-height-compact: 44px;
  --control-height: 48px;
  --control-height-large: 56px;
  --disclosure-height: 72px;
  --logo-height: 30px;
  --logo-width: 222px;
  --text-inline-code: 0.9em;
  --leading-section: 0.95;
  --leading-home: 0.9;
  --leading-pricing: 0.92;
  --leading-lead: 1.4;
  --leading-prose: 1.5;
  --leading-solid: 1;
  --tracking-display: -0.035em;
  --tracking-title: -0.03em;
  --tracking-numeral: var(--type-numeral-tracking);
  --tracking-label: var(--type-label-tracking);
}

.t-display { font-family: var(--font-sans); font-size: var(--type-display-size); line-height: var(--type-display-leading); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); }

.t-title { font-family: var(--font-sans); font-size: var(--type-title-size); line-height: var(--type-title-leading); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); }

.t-heading { font-family: var(--font-sans); font-size: var(--type-heading-size); line-height: var(--type-heading-leading); font-weight: var(--type-heading-weight); }

.t-body { font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-leading); font-weight: var(--type-body-weight); }

.t-label { font-family: var(--font-sans); font-size: var(--type-label-size); line-height: var(--type-label-leading); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); }

.t-numeral { font-family: var(--font-mono); font-size: var(--type-numeral-size); line-height: var(--type-numeral-leading); font-weight: var(--type-numeral-weight); letter-spacing: var(--type-numeral-tracking); }

.t-code { font-family: var(--font-mono); font-size: var(--type-code-size); line-height: var(--type-code-leading); font-weight: var(--type-code-weight); }
