/* Service Translator — generated from tokens.json. Copy of the design system artifact */
:root, [data-theme="light"] {
  --paper: #f7f5ed; /* Page background of the public site. Carries ink, muted and focus text. */
  --white: #fffef9; /* Raised surfaces: cards, the phone mockup, floating notes. Carries ink and muted. */
  --sage: #e8eddf; /* Soft tinted panels: hero art, closing band, copy box, highlighted estimate. Carries ink; muted only at 18px+ (4.28:1). */
  --sage-soft: #edf1e6; /* Pill and chip fills inside the phone mockup. */
  --sage-step: #e7eddb; /* Numbered step discs on cards. */
  --sage-line: #c3d0b3; /* Halo rings in the hero art. Decorative only. */
  --ink: #203c33; /* All headings and body text on paper, white, sage and lime (10.9:1 on paper). */
  --muted: #657168; /* Paragraphs, captions, eyebrows and notes on paper and white (4.67:1 on paper). */
  --moss: #688255; /* Italic emphasis inside serif headlines on paper. Display sizes only: 3.92:1, below 4.5 for small text. */
  --line: #d8ded3; /* Hairlines: section rules, card borders, secondary button border, FAQ dividers. Decorative (1.26:1), never the only edge of a control. */
  --green: #244d40; /* The brand colour. Primary buttons, the offer panel, the current step, the logo tile. Carries white (9.5:1) and lime. */
  --phone-frame: #254b3e; /* Bezel of the phone illustration. */
  --lime: #daeaa8; /* Accent. The button on the green offer panel, highlights. Carries ink (9.3:1). */
  --on-green: #ffffff; /* Text and labels on green. */
  --on-green-muted: #d4ded4; /* Paragraph text on the green offer panel (6.9:1). */
  --on-green-eyebrow: #cedcaf; /* Eyebrow labels on the green offer panel (6.6:1). */
  --field: #ffffff; /* Input and select background. */
  --field-border: #b8c4b6; /* Input and select borders. Kept as in code: 1.81:1 on white, below the 3:1 control-border floor. */
  --focus: #ba732e; /* Focus outline, 3px solid, offset 4px. 3.45:1 on paper; only 2.52:1 on green, so offset it onto paper. */
  --live: #547b38; /* The LIVE dot and status text on white (4.87:1). */
  --success-bg: #e5ecd8; /* Success message background. Carries ink. */
  --error: #8d342b; /* Error message text on error-bg (6.6:1). */
  --error-bg: #f9e7e0; /* Error message background. */
  --shadow-float: 0 8px 30px #203c3310; /* Floating notes over the hero art. */
  --shadow-phone: 14px 25px 45px #213e3326; /* The tilted phone illustration. */
}
:root {
  --space-12: 12px; /* Gap between buttons in an action row; grid gap on tablets. */
  --space-16: 16px; /* Estimate grid gap. */
  --space-24: 24px; /* Grid gap between cards; nav link gap. */
  --space-28: 28px; /* Card padding. */
  --space-gutter: 26px; /* Side padding of the content wrap (22px on phones). */
  --space-45: 45px; /* Offer panel padding (30px on phones). */
  --space-64: 64px; /* Section vertical padding and split-layout gap. */
  --width-content: 1160px; /* Max width of the content wrap. */
  --radius-field: 7px; /* Inputs and selects. */
  --radius-sm: 8px; /* Buttons, notices, copy box. */
  --radius-float: 10px; /* Floating notes on the hero art. */
  --radius-card: 14px; /* Cards and the logo tile (14/48). */
  --radius-panel: 18px; /* Offer panel and closing band. */
  --radius-pill: 20px; /* Pills, the PILOT badge, step trail chips. */
  --radius-arch: 100px; /* Top corners of the hero art arch (bottom corners 24px). */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, sans-serif;
  --text-credit-number: 400 80px/1 var(--font-serif); /* One big figure on the offer panel. */
  --text-display: 400 70px/1.04 var(--font-serif); /* Page h1. Scales with clamp(42px, 5.3vw, 70px); 52px on phones. */
  --text-heading: 400 42px/1.15 var(--font-serif); /* Section h2; 35px on phones. */
  --text-caption-serif: 400 20px/1.45 var(--font-serif); /* Translated caption text in the phone mockup. */
  --text-title: 700 20px/1.3 var(--font-sans); /* Card and step titles (h3). */
  --text-lead: 400 18px/1.65 var(--font-sans); /* Hero intro paragraph, max 540px wide. */
  --text-body: 400 16px/1.65 var(--font-sans); /* Default text. */
  --text-button: 600 14px/1.65 var(--font-sans); /* Button labels; card paragraphs use 14px at 400. */
  --text-label: 600 13px/1.65 var(--font-sans); /* Form labels. Navigation links use 13px at 400. */
  --text-note: 400 12px/1.65 var(--font-sans); /* Fine print, trust strip, footer. */
  --text-eyebrow: 700 11px/1.65 var(--font-sans); /* Uppercase kicker above headings, in muted. */
  --text-badge: 400 9px/1.65 var(--font-sans); /* The PILOT tag beside the wordmark. */
}