/*
 * smartercredit-base — design tokens
 *
 * ORIGINAL DERIVATION (2026-08-11): recovered from the Divi-era build, source
 * priority per builds/spec111/DESIGN-NOTES.md — (1) wp_options `et_divi`,
 * (2) the Theme Builder header/footer template, (3) the rendered static mirror.
 *
 * CORRECTED 2026-08-12 against MEASURED production values.
 * ---------------------------------------------------------------------------
 * The original values were read out of Divi's *compiled CSS rules*, taking the
 * modal value across every rule that set a given property. That is not the same
 * as what the browser actually renders: Divi sets these per-section, so the most
 * frequently *written* value is often not the one you see on the page. The
 * token file's own comments flagged the variance ("values vary 33px-65px for h1
 * alone") without resolving it.
 *
 * `tools/derive-css.py` now reads `getComputedStyle` off the live production
 * pages via CDP and takes the modal value per archetype. Where the two disagree,
 * the rendered measurement wins — same rule as everywhere else in this repo:
 * trust live state over documentation. Each corrected token carries its old
 * value so the delta stays auditable.
 *
 * Re-measure with:  python tools/derive-css.py --out tools/derived.json
 */

/* ---- Webfont: Urbanist, self-hosted ---------------------------------------
 *
 * Staging declared Urbanist and loaded NO font file at all — `document.fonts`
 * was empty — so every page rendered in Helvetica while `getComputedStyle`
 * still reported "Urbanist" (computed style echoes the declared stack whether
 * or not the face resolved). That is why the type looked subtly wrong
 * everywhere without any single element being measurably off.
 *
 * Self-hosted rather than pulled from Google: it removes a third-party request
 * from a PII-collecting page, it is the standing no-CDN rule, and it closes the
 * open spec125 follow-up. One 27.8 KB variable file covers 100–900 — Google's
 * css2 endpoint returns the same URL for every weight we asked for, so
 * shipping per-weight files would have been four identical copies. */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/urbanist-variable.woff2') format('woff2');
}

:root {
  /* ---- Color: brand palette ---------------------------------------
     Confirmed unchanged by measurement: the primary button's rendered
     background is exactly linear-gradient(90deg, #51a3e6, #6dbfc8). */
  --sc-color-primary: #51a3e6;
  --sc-color-primary-dark: #4183b8;
  --sc-color-accent: #6dbfc8;

  /* ---- Color: text ---------------------------------------------------
     --sc-color-text (#1a1a1a) confirmed: it is the measured color of every
     rendered h1/h2/h3/h4.
     --sc-color-body is NEW. Measured body/`.sc-text` color is #666666 across
     all 8 sampled pages. The old --sc-color-text-muted (#484848) was picked
     from the compiled rules and is never what renders on body copy; it is
     retained for secondary UI (labels, captions) where it still applies. */
  --sc-color-text: #1a1a1a;
  --sc-color-body: #666666;        /* MEASURED — the real body-copy color */
  --sc-color-text-muted: #484848;
  /* accordion panel copy renders a touch darker than body copy */
  --sc-color-text-panel: #262626;  /* MEASURED */

  /* ---- Color: surfaces -------------------------------------------- */
  --sc-color-bg: #ffffff;
  /* footer + dark band background — measured rgb(8,33,54) exactly. */
  --sc-color-bg-alt: #082136;
  --sc-color-border: #d2e8f9;
  /* form control border + accordion hairline, both measured */
  --sc-color-border-input: #bbbbbb;
  --sc-color-border-hairline: rgba(81, 163, 230, 0.16);
  /* footer body text on the navy ground */
  --sc-color-on-dark: #d1d1d1;     /* MEASURED */

  --sc-color-success: #63c32d; /* ASSUMED — configured in Divi's palette, no rendered usage found */

  /* ---- Typography ----------------------------------------------------
     Family confirmed by measurement on every archetype. */
  --sc-font-heading: 'Urbanist', Helvetica, Arial, Lucida, sans-serif;
  --sc-font-body: 'Urbanist', Helvetica, Arial, Lucida, sans-serif;

  /* Sizes + line-heights are MEASURED modal values per rendered element.
     Four of the five headings were wrong in the compiled-rule derivation —
     h3 by 15px and h4 by 6px, which is why staging's section headings and
     blurb titles read as body copy rather than as headings. */
  --sc-fs-h1: 54px;   /* was 48px */
  --sc-lh-h1: 65px;
  --sc-fs-h2: 42px;   /* unchanged — the one the old derivation got right */
  --sc-lh-h2: 51px;
  --sc-fs-h3: 20px;   /* was 35px */
  --sc-lh-h3: 24px;
  --sc-fs-h4: 24px;   /* was 18px */
  --sc-lh-h4: 29px;
  --sc-fs-base: 18px; /* was 16px — body copy renders at 18px/24px */
  --sc-lh-base: 24px;
  --sc-fs-small: 14px;
  --sc-lh-small: 23.8px;
  /* Footer body copy: links, copyright, disclaimer. MEASURED 2026-08-12 — no
     existing step covers 16px (the scale jumps 14 -> 18 with nothing between),
     and all three consumers share this exact value, so it's a token rather
     than three literals. */
  --sc-fs-footer: 16px;

  /* ---- Spacing ---------------------------------------------------
     --sc-space-section is NEW and is the single most load-bearing value the
     old token set lacked: 70px top/bottom is the dominant measured section
     padding. Without it every band collapsed to its content height, which is
     most of why staging rendered 53% taller and shapeless. */
  --sc-space-xs: 8px;
  --sc-space-sm: 16px;
  --sc-space-md: 24px;
  --sc-space-lg: 32px;
  --sc-space-xl: 60px;
  --sc-space-section: 70px;        /* MEASURED */
  --sc-space-band: 60px;           /* MEASURED — image/dark bands + footer */

  /* ---- Layout ------------------------------------------------------
     1224px confirmed by measurement on every .et_pb_row. */
  --sc-container-max: 1224px;
  --sc-radius: 5px;
  --sc-radius-lg: 8px;             /* MEASURED — accordion items */
  --sc-radius-card: 10px;          /* form card — MEASURED 2026-08-12, was 12px. Single consumer (components.css `.sc-raw form` card rule), corrected in place rather than left with an unused value. */
  --sc-shadow: 0 8px 16px rgba(26, 26, 26, 0.21);
  --sc-shadow-card: 0 8px 30px rgba(8, 33, 54, 0.08);

  /* Column widths are Divi's gutter-2 grid, confirmed to the pixel against a
     1224px row: 1/4 = 278.45px, 1/3 = 383.52px, 1/2 = 578.33px. The halves
     row uses gutter-3 (5.5%) on production; we normalise every row to a
     single 3% gutter so one rule set covers the whole site. */
  --sc-gutter: 3%;
  --sc-col-1-2: 48.5%;
  --sc-col-1-3: 31.333%;
  --sc-col-1-4: 22.75%;
  --sc-col-2-3: 65.667%;

  /* ---- Section treatments (MEASURED, full strings) -------------------- */
  --sc-hero-gradient: linear-gradient(223deg, rgba(220, 236, 250, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
  --sc-button-gradient: linear-gradient(90deg, #51a3e6 0%, #6dbfc8 100%);
  --sc-button-gradient-hover: linear-gradient(90deg, #4183b8 0%, #5799a0 100%);

  /* ---- Breakpoints ---------------------------------------------------
     From et_divi's responsive prefs; 980px is where the desktop nav gives
     way to the hamburger and multi-column rows collapse. */
  --sc-bp-tablet: 768px;
  --sc-bp-desktop: 980px;
}