/*
 * Demo host theme — the copyable reference theme for integrators.
 *
 * This file is the ENTIRE styling surface a host owns (decision 0005): set
 * --tla-* custom properties anywhere above the embed (typically :root). They
 * inherit across the shadow boundary and the library stylesheet consumes
 * them. There is nothing to target inside the form — layout/structure is
 * library-owned, and host selectors cannot reach it.
 *
 * Grouped tokens don't auto-derive: overriding --tla-color-accent means also
 * setting its -hover / -tint / -focus-ring (and usually progress) mates.
 * Full token reference: docs/embedding.md §4.
 */
:root {
  /* Lato — matches the page chrome and the legacy platform. The @font-face
     lives in page.css; a shadow-root form inherits the loaded face fine. */
  --tla-font-body: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;

  /* Text — #444 is the legacy platform's body colour ($body-color: $grey-dark
     in form-builder's master/settings/_colours.scss), the same grey the legacy
     pricing curve uses. Kept in step with body{} in page.css. */
  --tla-color-text: #444444;
  --tla-color-text-muted: #666666;
  --tla-color-heading: #1a1a2e;

  /* Surfaces */
  --tla-color-surface: #ffffff;
  --tla-color-surface-muted: #f5f5f5;

  /* Borders */
  --tla-color-border: #cccccc;

  /* Banded content section — the dark "Why should you use our free service?"
     band. Values are legacy's .block--secondary ($block-color-secondary /
     $block-color-secondary-text) from the form-builder stylesheet, so this
     page matches drive.askaprice.com. Both are set together: the surface
     without the text colour renders dark-on-dark. */
  --tla-color-section-surface: #444444;
  --tla-color-section-text: #ffffff;
  /* Legacy's mobile row divider was `border-top: 1px solid $white`. Softened
     to a translucent white so it reads as a divider on #444 rather than as a
     hard rule. */
  --tla-color-section-border: rgba(255, 255, 255, 0.25);

  /* Accent — legacy askaprice blue. Values sampled from the production
     stylesheet's .tla-btn--info (the blue Next button on drive.askaprice.com),
     not the orange .tla-btn--primary. The -hover / -tint / -focus-ring mates
     don't auto-derive from --tla-color-accent, so all four are set together. */
  --tla-color-accent: #3c91e6;
  --tla-color-accent-hover: #1d7edf;
  --tla-color-accent-contrast: #ffffff;
  --tla-color-accent-tint: rgba(60, 145, 230, 0.08);

  /* Progress — legacy fill is green (#7fb33a), not the accent, on a
     #dde1e5 track (.tla-progress__bar). */
  --tla-color-progress: #7fb33a;
  --tla-color-progress-track: #dde1e5;

  /* States — error border stays red; it must not follow the accent or
     invalid fields stop reading as errors. */
  --tla-color-error-text: #cc0000;
  --tla-color-error-border: #f10000;
  --tla-color-focus-ring: rgba(60, 145, 230, 0.35);

  --tla-form-max-width: 788px;

  /* Banded sections (accordion, testimonials) span the full page here, as they
     do on drive.askaprice.com — legacy's .block--secondary is a sibling of the
     form rather than a child, so it was never constrained by the form width.
     This page owns its whole layout, so opting in is safe; a form embedded in
     someone else's page leaves this unset and the bands stop at the form edge.

     Widen by half the gap between the viewport and the form. Deliberately
     100vw and not 100%: the bleed has to measure the VIEWPORT, and a percentage
     would resolve against the form's own width. The known cost is the scrollbar
     gutter — vw includes it, so on a scrolling page the bands overhang by the
     scrollbar width; body{overflow-x:hidden} in page.css absorbs that.

     Per-component overrides (--tla-accordion-bleed / --tla-testimonials-bleed)
     are available if one band ever needs to differ. */
  --tla-bleed: max(0px, calc((100vw - 788px) / 2));
}