/* Hallmark · macrostructure: Marquee Hero · tone: trustworthy / approachable · anchor hue: brand-green
 * theme: studied-DNA (source: urmortgages.com)
 * paper: white  ·  accent: green #03c78d (chromatic-green)  ·  display: Poppins (geometric-sans)  ·  body: Open Sans
 * pre-emit critique: P5 H5 E5 S5 R4 V4
 * NOTE: brand colours are kept as exact sRGB hex (brand fidelity overrides OKLCH purity);
 * neutral ramps use OKLCH. Every value below is a named token — no raw values in component CSS.
 */

:root {
  /* ---- Brand (exact, do not drift) ---- */
  --brand-green:        #03c78d;   /* primary  */
  --brand-green-700:    #02a576;   /* hover / pressed */
  --brand-green-300:    #5fe0bb;   /* tint */
  --brand-green-050:    #e6faf3;   /* wash / surface tint */
  --brand-ink:          #282828;   /* near-black text / "Mortgage" wordmark */

  /* ---- Accent "rainbow" (loan-option coding, sparingly) ---- */
  --accent-orange:      #fa9d39;
  --accent-coral:       #f85a85;
  --accent-teal:        #59c2c0;
  --accent-blue:        #41a2ed;
  --accent-violet:      #8224e3;

  /* ---- Neutrals (OKLCH ramp) ---- */
  --ink:        oklch(24% 0.004 250);   /* body text */
  --ink-soft:   oklch(44% 0.006 250);   /* secondary text */
  --ink-faint:  oklch(60% 0.008 250);   /* captions / placeholders */
  --line:       oklch(92% 0.004 250);   /* hairline borders */
  --line-soft:  oklch(95.5% 0.003 250); /* faint dividers */
  --paper:      #ffffff;                /* page background */
  --paper-2:    oklch(98.4% 0.004 200); /* raised surface / section band */
  --paper-3:    oklch(96.6% 0.006 195); /* deeper band */
  --paper-tint: var(--brand-green-050); /* brand-tinted band */

  /* ---- Semantic feedback ---- */
  --ok:    var(--brand-green-700);
  --warn:  #b7791f;
  --error: #d23f3f;
  --error-bg: #fdecec;
  --focus: var(--brand-green-700);

  /* ---- Typography ----
   * Clash Display (distinctive, premium display) + Satoshi (clean, modern, highly
   * readable body) — a designer-grade pairing, loaded from Fontshare. System
   * fallbacks keep things sane if the CDN is unreachable. */
  --font-display: "Clash Display", "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Satoshi", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* fluid type scale (1.20 minor-third-ish, clamped) */
  --text-xs:    0.78rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.31rem;
  --text-2xl:   clamp(1.45rem, 1.2rem + 1.1vw, 1.85rem);
  --text-3xl:   clamp(1.8rem, 1.4rem + 1.9vw, 2.55rem);
  --text-4xl:   clamp(2.25rem, 1.6rem + 3vw, 3.4rem);
  --text-display:   clamp(2.7rem, 1.7rem + 4.6vw, 4.6rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.62;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* ---- Spacing (4pt scale) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --space-4xl: 8rem;

  /* ---- Radii ---- */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  30px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --rule-hair: 1px solid var(--line);
  --rule-soft: 1px solid var(--line-soft);

  /* ---- Elevation (soft, low-spread, brand-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(20, 40, 35, 0.05), 0 2px 6px rgba(20, 40, 35, 0.04);
  --shadow-md: 0 6px 18px rgba(15, 50, 40, 0.07), 0 2px 6px rgba(15, 50, 40, 0.05);
  --shadow-lg: 0 18px 48px rgba(10, 50, 40, 0.12), 0 6px 14px rgba(10, 50, 40, 0.06);
  --shadow-green: 0 10px 28px rgba(3, 199, 141, 0.28);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid:  240ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 76px;
}