/* =============================================================================
   Design tokens — Lendie Business Loan application form
   =============================================================================

   Calibrated against a side-by-side screenshot of the live Personal Loan form
   (2026-08-14). Measurements were taken off that screenshot at ~1890px wide,
   so they are close but not pixel-exact.

   ⚠️  ONE THING STILL UNMATCHED: the typeface. The reference uses a geometric
   sans that cannot be identified from a screenshot, and our CSP blocks external
   font hosts (`default-src 'self'`, no font-src). Matching it properly needs
   two things from someone with browser access to the live form:
       1. devtools → Computed → font-family, to name it
       2. the font file, self-hosted under client/fonts/ + a font-src CSP entry
   Until then this uses the closest system stack, which is the most visible
   remaining difference.

   Everything visual is defined here and nowhere else — correcting a value is a
   single-file change with no hunting.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------
     The reference button is near-black navy, considerably darker than the
     heading text. They are NOT the same colour — don't collapse them. */
  --lc-navy: #16202e;          /* Continue / Back buttons — active */
  --lc-navy-hover: #232f40;

  /* Inactive Continue: the reference greys the button out entirely until the
     page is valid — not a dimmed navy, a different palette with its own border. */
  --lc-btn-idle-bg: #e9edf2;
  --lc-btn-idle-text: #9aa5b1;
  --lc-btn-idle-border: #c8d1dc;
  --lc-logo: #1C3855;          /* brand navy, taken from the supplied logo.svg */
  --lc-blue: #0065cc;          /* .p-progressbar-value + back link, exact */

  /* --- Surfaces --------------------------------------------------------- */
  --lc-bg: #f7fafe;           /* body background, exact */
  --lc-surface: #ffffff;
  --lc-border: #d8e0ea;
  --lc-track: #dde5ee;         /* progress track — visibly darker than the page */

  /* --- Text ------------------------------------------------------------- */
  --lc-text: #1e293b;          /* .title, exact */
  --lc-muted: #3d5875;         /* hints — darker than a typical grey */
  --lc-note: #3d4f66;          /* "N minutes from finish" */
  --lc-on-navy: #ffffff;
  --lc-required: #ca181f;      /* .error, exact */

  /* --- Type -------------------------------------------------------------
     DM Sans, self-hosted — see styles/fonts.css for why this rather than the
     reference form's Google Sans. The fallbacks matter: font-display is swap,
     so these are what a visitor sees for the first moment. */
  --lc-font: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --lc-size-logo: 1.875rem;    /* 30px, measured off a 1440 render */
  --lc-size-question: 2rem;    /* .title, exact */
  --lc-size-hint: 1rem;        /* 16px, measured */
  --lc-size-note: 0.9375rem;   /* 15px, measured */
  --lc-size-label: 0.9375rem;  /* 15px */
  --lc-size-input: 1rem;
  --lc-size-button: 1rem;
  --lc-weight-question: 500;
  --lc-weight-logo: 700;

  /* --- Shape ------------------------------------------------------------
     The reference rounds inputs and buttons the same amount — noticeably
     softer than the 4px we had. */
  --lc-radius-input: 6px;
  --lc-radius-button: 6px;
  --lc-radius-card: 10px;
  --lc-border-width: 1px;

  /* --- Spacing ---------------------------------------------------------- */
  --lc-gap-xs: 0.25rem;
  --lc-gap-sm: 0.5rem;
  --lc-gap-md: 1rem;
  --lc-gap-lg: 2rem;
  --lc-gap-xl: 3rem;

  /* --- Layout ----------------------------------------------------------- */
  /* Their .input-container is max-width 30rem and the control inside is 80%
     of it — so the field itself is 24rem, not the ~17rem I had guessed. */
  --lc-field-container: 13.2rem;
  --lc-field-width: 13.2rem;   /* 211px, measured */
  --lc-field-height: 2.625rem; /* 42px, measured */
  --lc-button-width: 7rem;     /* 111px, measured */
  --lc-field-address: 22rem;   /* an address does not fit the 13.2rem column */
  --lc-field-search: 22rem;    /* nor does "Broker Services: Insurance & Real Estate" */
  --lc-content-max: 34rem;

  /* --- Slider -----------------------------------------------------------
     The reference shows the amount as a large blue headline with the slider
     beneath it — NOT a text box. The number is display-only; the slider is
     the control. Sizes are proportional to the 2rem question, measured off
     the client's screenshot of /#/requested_amount. */
  --lc-size-amount: 3rem;      /* the headline figure — "$9,000" */
  --lc-weight-amount: 700;
  --lc-size-bound: 1.125rem;   /* the min/max captions under the track */
  --lc-bound: #6b7280;         /* same grey as .disclosure in their stylesheet */
  /* min() so a narrow phone clamps to the column instead of pushing the page
     sideways — a fixed rem width here overflowed the whole layout at 390px. */
  --lc-slider-width: min(26rem, 100%);
  --lc-slider-track: 0.375rem; /* 6px — thinner than the progress bar */
  --lc-slider-thumb: 1.25rem;  /* 20px white knob */
  /* The header band and progress bar share a max width and centre, rather than
     using a percentage inset. That is why the bar looks proportionally wider on
     a narrow window and narrower on a wide one. */
  /* Their header is a grid: 15% for the wordmark column, 70% for the progress
     column. That is the actual model — not a max-width band, which is why no
     single value of mine reproduced it at more than one window size. */
  /* Measured off a headless render at 1440: content occupies a centred band of
     ~945px, i.e. 66% of the viewport, with the wordmark and the full-width bar
     both inside it. The 15%/70% grid in their stylesheet governs a different
     element. */
  --lc-band-width: 66%;
  --lc-band-max: 74rem;
  --lc-progress-height: 0.7rem;/* 11px, measured */
  /* Left/right margin shared by the wordmark and the progress bar.
     PROPORTIONAL, not fixed: the reference keeps roughly 12% of the viewport
     clear on each side, so the margin grows with the window. A fixed rem value
     looks correct at one width and vanishes on a wide monitor — which is what
     ours was doing. Clamped so it stays sane on very narrow and very wide
     screens; the mobile media query overrides it below 40rem. */
  --lc-page-inset: clamp(1.25rem, 12vw, 16rem);

  /* --- Motion ----------------------------------------------------------- */
  --lc-transition: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --lc-transition: 0ms; }
}