/* ============================================================
   FREEDOMVISORY · BASE ELEMENT STYLES
   Light, opt-in foundations. Sets the Pearl Ivory canvas, Poppins
   defaults, and a small set of brand utility classes. Components
   reference tokens directly and do not depend on these resets.
   ============================================================ */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Poppins Bold, Sovereign Navy, tight tracking */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); }

p  { margin: 0 0 var(--space-4); line-height: var(--lh-body); text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

strong { font-weight: var(--fw-bold); }

::selection { background: var(--fv-champagne); color: var(--fv-sovereign-navy); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Brand utility classes (optional helpers) ---- */

/* Eyebrow / category label — Poppins Light, uppercase, tracked */
.fv-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-eyebrow);
}

/* Section heading H2 — uppercase, letter-spaced */
.fv-section-heading {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-heading);
}

/* Display heading */
.fv-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}

/* Caption / footnote — Poppins Light */
.fv-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* The thin gold rule used under headings and beside the wordmark */
.fv-rule-gold {
  width: 56px;
  height: var(--bw-rule);
  background: var(--rule-gold);
  border: 0;
  margin: var(--space-4) 0;
}

/* Pull-quote / framework callout on Champagne */
.fv-callout {
  background: var(--surface-feature);
  border-left: var(--bw-accent) solid var(--fv-covenant-gold);
  padding: var(--space-5) var(--space-6);
  color: var(--fv-sovereign-navy);
}

/* Arabic calligraphic signal — Amiri, reserved use only */
.fv-arabic {
  font-family: var(--font-arabic);
  direction: rtl;
}

/* Trademark symbol on proprietary framework names */
.fv-tm {
  font-weight: var(--fw-light);
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 0.05em;
}