/* =====================================================================
   WFG LANDING PAGE SYSTEM — BRAND TOKENS (LOCKED)
   Pinned from the WFG Marketing Vault (get_brand_guide), July 2026.

   • This file is the ONLY source of color, type, spacing, and component
     primitives for pages on lp.wesleyfinancialgroup.com.
   • Pages style exclusively from these custom properties. Never use raw
     hex values, off-scale sizes, or fonts outside this file. CI lint
     enforces this.
   • Do not edit this file in a page PR. Re-pull from the Vault and
     re-commit (owner: Zach) only when the Vault brand changes.

   NOTE (palette provenance): the Vault brand guide §1 token block lists
   green #51B37F / ocean #1A6F9C / near-black #1B2035, while §§2–7 (links,
   buttons, forms, shadows) and every deployed WFG property use the values
   below. Pinned to the deployed set pending Vault reconciliation
   (update request filed). Swapping is a 4-line change here if brand
   decides otherwise.
   ===================================================================== */

/* ---------- Fonts ----------
   Fully self-hosted from /assets/fonts/ (converted from the licensed
   Vault TTFs — Plantin MT Pro is Monotype-licensed, WFG properties only).
   No Google Fonts, no third-party font hosts. The variable Nunito files
   are served under the CSS family name "Nunito Sans" (the brand's body
   family) so every existing reference keeps working. */

@font-face {
  font-family: "Plantin MT Pro";
  src: url("/assets/fonts/PlantinMTPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plantin MT Pro";
  src: url("/assets/fonts/PlantinMTPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plantin MT Pro";
  src: url("/assets/fonts/PlantinMTPro-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plantin MT Pro";
  src: url("/assets/fonts/PlantinMTPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plantin MT Pro";
  src: url("/assets/fonts/PlantinMTPro-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/Nunito-Variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/Nunito-Italic-Variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color — Identity palette ---------- */
  --wfg-warm-gray:  #716D63;   /* PMS 4292 C — secondary text, one-color logo */
  --wfg-gold:       #BC8C3D;   /* lion icon, eyebrows, premium accents — never a body surface */
  --wfg-white:      #FFFFFF;   /* dominant background (~60% of any page) */

  /* ---------- Color — Site & magazine palette ---------- */
  --wfg-light-ice:  #E9F1F4;   /* PMS 656 C — cards, callouts, hover, secondary section bg */
  --wfg-light-gray: #F4F4F4;   /* alternate section background */
  --wfg-warm-beige: #D8C9BC;   /* PMS 7611 C — warm editorial surfaces, founder sections */
  --wfg-navy:       #24265C;   /* PMS 273 C — headlines, dark callouts, hero-stat boxes */
  --wfg-ocean:      #0066AD;   /* secondary accents, interactive states, input focus */
  --wfg-green:      #39B271;   /* CONVERSION ONLY — primary CTAs, links, active states */
  --wfg-green-hover:#2E9961;   /* CTA + link hover */
  --wfg-near-black: #1A2034;   /* darkest value — body text, dark bg. Never pure #000. */

  /* ---------- Functional aliases ---------- */
  --wfg-text:           var(--wfg-near-black);
  --wfg-text-secondary: var(--wfg-warm-gray);
  --wfg-bg:             var(--wfg-white);
  --wfg-bg-alt:         var(--wfg-light-gray);
  --wfg-bg-warm:        var(--wfg-warm-beige);
  --wfg-bg-cool:        var(--wfg-light-ice);
  --wfg-cta:            var(--wfg-green);
  --wfg-cta-hover:      var(--wfg-green-hover);
  --wfg-link:           var(--wfg-green);
  --wfg-border:         #E0E0DC;   /* hairline — cards, dividers, inputs */
  --wfg-error:          #D32F2F;   /* form errors only (accessibility-driven, per guide §6) */

  /* ---------- Typography ---------- */
  --font-display: "Plantin MT Pro", "Spectral", "Source Serif Pro", Georgia, serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Web type scale — LOCKED (matches brand guide §2) */
  --type-display: clamp(40px, 5.5vw, 56px);   /* Plantin Bold 700, lh 1.05, ls -0.02em */
  --type-h1:      clamp(36px, 4.8vw, 48px);   /* Plantin Bold 700 (conversion) / SemiBold 600 (editorial) */
  --type-h2:      clamp(28px, 3.6vw, 40px);   /* Plantin SemiBold 600, lh 1.15 */
  --type-h3:      clamp(22px, 2.4vw, 28px);   /* Plantin SemiBold 600, lh 1.2 */
  --type-h4:      18px;                        /* Nunito Sans Bold 700 */
  --type-hero-sub:18px;                        /* Nunito Sans 400, Warm Gray, under H1 only */
  --type-body:    16px;                        /* Nunito Sans 400, lh 1.6 */
  --type-small:   14px;                        /* Nunito Sans 400, Warm Gray */
  --type-caption: 12px;                        /* footer legal, disclaimers */
  --type-eyebrow: 12px;                        /* Nunito SemiBold 600, Gold, UPPERCASE, 0.18em */
  --type-button:  15px;                        /* Nunito Bold 700, UPPERCASE, 0.08em */
  --type-stat:    clamp(48px, 6vw, 72px);      /* Plantin Bold 700, Gold (Navy on light bg) */

  /* ---------- Spacing ---------- */
  --space-xs:  4px;
  --space-s:   8px;
  --space-m:   16px;
  --space-l:   24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Section rhythm */
  --section-y: clamp(48px, 7vw, 88px);
  --section-x: clamp(20px, 4vw, 32px);

  /* Containers */
  --container:        1180px;
  --container-wide:   1320px;
  --container-narrow: 720px;

  /* ---------- Radius ---------- */
  --radius-pill: 100px;   /* tags, pills — never buttons */
  --radius-s:    4px;
  --radius:      8px;     /* cards, inputs */
  --radius-l:    16px;    /* feature blocks */
  --radius-btn:  6px;     /* buttons — rounded rectangle, NOT a pill */

  /* ---------- Shadows (flat system — cards have none at rest) ---------- */
  --shadow-sm:  0 1px 2px rgba(26, 32, 52, 0.06);    /* interactive-card hover lift */
  --shadow-md:  0 8px 24px rgba(26, 32, 52, 0.08);   /* lead form, sticky bar, dropdown */
  --shadow-lg:  0 16px 40px rgba(26, 32, 52, 0.10);  /* hero visual, modal */
  --shadow-cta: 0 4px 12px rgba(57, 178, 113, 0.25); /* green primary CTA only */
}

/* =====================================================================
   BASE ELEMENT STYLES — the locked defaults every page inherits.
   Pages add their own layout CSS; they do not override these primitives.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--wfg-text);
  background: var(--wfg-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .lp-display { font-family: var(--font-display); color: var(--wfg-text); margin: 0 0 var(--space-m); }
h1 { font-size: var(--type-h1); font-weight: 700; line-height: 1.1;  letter-spacing: -0.02em; }
h2 { font-size: var(--type-h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--type-h3); font-weight: 600; line-height: 1.2;  letter-spacing: -0.01em; }
h4 { font-family: var(--font-body); font-size: var(--type-h4); font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-s); }
.lp-display { font-size: var(--type-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.lp-h1-editorial { font-weight: 600; } /* brand/founder/advertorial heroes */

p { margin: 0 0 var(--space-m); }

a {
  color: var(--wfg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--wfg-cta-hover); }
a:focus-visible { outline: 2px solid var(--wfg-green); outline-offset: 2px; }

/* ---------- Eyebrow — "NN · SECTION NAME" pattern ---------- */
.lp-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wfg-gold);
  margin: 0 0 14px;
}

/* ---------- Buttons ---------- */
.lp-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-button);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius-btn);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.lp-btn--primary { background: var(--wfg-cta); color: var(--wfg-white); box-shadow: var(--shadow-cta); }
.lp-btn--primary:hover { background: var(--wfg-cta-hover); color: var(--wfg-white); }
.lp-btn--secondary { background: transparent; color: var(--wfg-navy); border: 1.5px solid var(--wfg-navy); box-shadow: none; }
.lp-btn--secondary:hover { background: var(--wfg-navy); color: var(--wfg-white); }
.lp-btn--ghost { background: transparent; color: var(--wfg-white); border: 1.5px solid var(--wfg-white); box-shadow: none; }
.lp-btn--ghost:hover { background: var(--wfg-white); color: var(--wfg-navy); }
.lp-btn--compact { padding: 10px 18px; }
.lp-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- Cards — flat, hairline border ---------- */
.lp-card {
  background: var(--wfg-white);
  border: 1px solid var(--wfg-border);
  border-radius: var(--radius);
  padding: var(--space-l);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-card--hover:hover { border-color: var(--wfg-warm-gray); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---------- Layout helpers ---------- */
.lp-container        { max-width: var(--container);        margin: 0 auto; padding: 0 var(--section-x); }
.lp-container--wide   { max-width: var(--container-wide); }
.lp-container--narrow { max-width: var(--container-narrow); }
.lp-section { padding: var(--section-y) 0; }
.lp-section--alt  { background: var(--wfg-bg-alt); }
.lp-section--cool { background: var(--wfg-bg-cool); }
.lp-section--warm { background: var(--wfg-bg-warm); }
.lp-section--navy { background: var(--wfg-navy); color: var(--wfg-white); }
.lp-section--navy h1, .lp-section--navy h2, .lp-section--navy h3 { color: var(--wfg-white); }