/* ============================================================
   WINGED VICTORY ADVISORY — Core Tokens
   Typography + Color foundations
   ============================================================ */

/* ---------- TERMINA (display / wordmark companion) ---------- */
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-Demi.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("../fonts/Termina-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- WESTMOUNT (display serif — alt headlines / editorial) ---------- */
@font-face {
  font-family: "Westmount";
  src: url("../fonts/Westmount-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Westmount";
  src: url("../fonts/Westmount-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Westmount";
  src: url("../fonts/Westmount-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Westmount";
  src: url("../fonts/Westmount-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Westmount";
  src: url("../fonts/Westmount-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   ROOT TOKENS
   ============================================================ */
:root {
  /* ---------- COLOR — Core ---------- */
  /* The brand reads as a strict, editorial monochrome.
     Black/white is the system; warm neutrals add restraint;
     a single deep accent provides emphasis. */

  --wv-ink:        #0A0A0A;   /* Near-black — primary surface for "Boardroom/Newsroom/War Room" gravity */
  --wv-ink-2:      #1C1C1C;   /* Off-black — large surfaces, cards on dark */
  --wv-graphite:   #2E2E2E;   /* Dividers / quiet UI on dark */
  --wv-slate:      #4A4A4A;   /* Secondary type on light */
  --wv-pewter:     #767676;   /* Tertiary type, captions, eyebrows */
  --wv-silver:     #B8B8B8;   /* Hairlines, disabled */
  --wv-fog:        #E5E2DC;   /* Warm hairline / quiet divider */
  --wv-bone:       #F2EFE9;   /* Warm panel — "letterhead" feel */
  --wv-paper:      #FAF8F4;   /* Page background — warm white */
  --wv-white:      #FFFFFF;

  /* ---------- COLOR — Accent ---------- */
  /* A single, restrained accent. Deep oxblood — pulled from
     Republican/State-of-the-Union gravitas, not a "tech red". */
  --wv-oxblood:        #6B0F1A;
  --wv-oxblood-deep:   #4A0A12;
  --wv-oxblood-soft:   #8A1B27;
  --wv-gold:           #B8923A;   /* Honors / awards / quiet medal accent */
  --wv-gold-soft:      #D4B66B;

  /* ---------- COLOR — Semantic ---------- */
  --wv-bg:             var(--wv-paper);
  --wv-bg-alt:         var(--wv-bone);
  --wv-bg-inverse:     var(--wv-ink);

  --wv-fg:             var(--wv-ink);
  --wv-fg-2:           var(--wv-slate);
  --wv-fg-3:           var(--wv-pewter);
  --wv-fg-inverse:     var(--wv-paper);
  --wv-fg-inverse-2:   #C9C5BD;

  --wv-line:           var(--wv-fog);
  --wv-line-strong:    var(--wv-ink);
  --wv-line-inverse:   #2E2E2E;

  --wv-accent:         var(--wv-oxblood);
  --wv-accent-fg:      var(--wv-paper);
  --wv-honor:          var(--wv-gold);

  /* ---------- TYPOGRAPHY — Stacks ---------- */
  /* Termina = geometric sans, ALL-CAPS display (matches wordmark).
     Westmount = ALL-CAPS DISPLAY ONLY — has no lowercase glyphs;
                 use it for hero/section openers in caps, never body.
     Source Serif 4 = humanist editorial serif for body & long-form
                 (Google Fonts substitute — flagged in README). */
  --wv-font-display:        "Termina", "Futura PT", "Futura", "Helvetica Neue", Arial, sans-serif;
  --wv-font-display-serif:  "Westmount", "Cormorant Garamond", "Georgia", serif;
  --wv-font-serif:          "Source Serif 4", "Source Serif Pro", "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --wv-font-body:            var(--wv-font-serif);
  --wv-font-ui:             "Termina", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---------- TYPOGRAPHY — Scale ---------- */
  /* Editorial scale: small caps eyebrow → big serif headline → quiet sans body */
  --wv-eyebrow-size:    12px;
  --wv-eyebrow-track:   0.22em;
  --wv-eyebrow-weight:  600;

  --wv-display-1:       clamp(56px, 7vw, 112px);   /* Hero headlines */
  --wv-display-2:       clamp(44px, 5vw, 80px);    /* Section openers */
  --wv-h1:              clamp(36px, 3.5vw, 56px);
  --wv-h2:              clamp(28px, 2.6vw, 40px);
  --wv-h3:              clamp(22px, 1.8vw, 28px);
  --wv-h4:              18px;
  --wv-body-lg:         20px;
  --wv-body:            17px;
  --wv-body-sm:         15px;
  --wv-caption:         13px;
  --wv-micro:           11px;

  --wv-leading-tight:   1.05;
  --wv-leading-snug:    1.2;
  --wv-leading-normal:  1.5;
  --wv-leading-loose:   1.7;

  /* ---------- SPACING ---------- */
  --wv-s-1:  4px;
  --wv-s-2:  8px;
  --wv-s-3:  12px;
  --wv-s-4:  16px;
  --wv-s-5:  24px;
  --wv-s-6:  32px;
  --wv-s-7:  48px;
  --wv-s-8:  64px;
  --wv-s-9:  96px;
  --wv-s-10: 128px;
  --wv-s-11: 192px;

  /* ---------- LAYOUT ---------- */
  --wv-radius-0:    0px;     /* Default: hard edges. Editorial. */
  --wv-radius-1:    2px;     /* Reluctant softness — used very sparingly */
  --wv-radius-2:    4px;
  --wv-radius-pill: 999px;   /* For tags only */

  --wv-rule:        1px solid var(--wv-line);
  --wv-rule-strong: 1px solid var(--wv-ink);
  --wv-rule-thick:  2px solid var(--wv-ink);
  --wv-rule-hair-inverse: 1px solid var(--wv-line-inverse);

  --wv-shadow-1:    0 1px 0 0 rgba(10,10,10,0.04), 0 1px 2px rgba(10,10,10,0.06);
  --wv-shadow-2:    0 8px 24px -8px rgba(10,10,10,0.18);
  --wv-shadow-3:    0 24px 60px -20px rgba(10,10,10,0.28);

  /* ---------- MOTION ---------- */
  --wv-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --wv-dur-fast:    140ms;
  --wv-dur-base:    240ms;
  --wv-dur-slow:    480ms;

  /* ---------- CONTAINERS ---------- */
  --wv-container:   1280px;
  --wv-container-narrow: 880px;
  --wv-gutter:      max(24px, 5vw);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.wv-eyebrow {
  font-family: var(--wv-font-display);
  font-weight: var(--wv-eyebrow-weight);
  font-size: var(--wv-eyebrow-size);
  letter-spacing: var(--wv-eyebrow-track);
  text-transform: uppercase;
  color: var(--wv-fg-2);
  line-height: 1;
}

.wv-display-1 {
  font-family: var(--wv-font-display);
  font-weight: 700;
  font-size: var(--wv-display-1);
  letter-spacing: -0.01em;
  line-height: var(--wv-leading-tight);
  text-transform: uppercase;
  color: var(--wv-fg);
}

.wv-display-2 {
  font-family: var(--wv-font-display);
  font-weight: 700;
  font-size: var(--wv-display-2);
  letter-spacing: -0.005em;
  line-height: var(--wv-leading-tight);
  text-transform: uppercase;
}

.wv-headline-serif {
  font-family: var(--wv-font-serif);
  font-weight: 400;
  font-size: var(--wv-display-2);
  font-style: italic;
  line-height: var(--wv-leading-snug);
  letter-spacing: 0.045em;
  color: var(--wv-fg);
}

/* ----------------------------------------------------------------
   Global letter-spacing tuning for Westmount.
   Westmount reads dense at body sizes; opening up the tracking a touch
   makes long-form copy feel more editorial and easier on the eyes.
   These selectors apply to any element using the serif inline or via
   semantic class.
   ---------------------------------------------------------------- */
[style*="--wv-font-serif"],
[style*="--wv-font-body"],
[class*="wv-headline-serif"],
[class*="wv-lede"],
[class*="wv-body"],
[class*="wv-pull-quote"] {
  letter-spacing: 0.035em;
}

/* Westmount — used in ALL CAPS only; needs noticeable air between letters */
[style*="Westmount"],
[style*="--wv-font-display-serif"] {
  letter-spacing: 0.06em;
}

/* Display / large serif sizes — open them a touch more for elegance */
.wv-headline-serif,
.wv-pull-quote,
[style*="font-serif"][style*="clamp("] {
  letter-spacing: 0.045em;
}

/* Apply to inputs/textarea using the serif as well */
input, textarea {
  letter-spacing: inherit;
}

.wv-h1 {
  font-family: var(--wv-font-display);
  font-weight: 700;
  font-size: var(--wv-h1);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: var(--wv-leading-tight);
}

.wv-h2 {
  font-family: var(--wv-font-display);
  font-weight: 600;
  font-size: var(--wv-h2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: var(--wv-leading-snug);
}

.wv-h3 {
  font-family: var(--wv-font-display);
  font-weight: 500;
  font-size: var(--wv-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: var(--wv-leading-snug);
}

.wv-h4 {
  font-family: var(--wv-font-display);
  font-weight: 600;
  font-size: var(--wv-h4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wv-lede {
  font-family: var(--wv-font-serif);
  font-weight: 300;
  font-size: var(--wv-body-lg);
  line-height: var(--wv-leading-normal);
  letter-spacing: 0.035em;
  color: var(--wv-fg);
}

.wv-body {
  font-family: var(--wv-font-body);
  font-weight: 400;
  font-size: var(--wv-body);
  line-height: var(--wv-leading-loose);
  letter-spacing: 0.035em;
  color: var(--wv-fg);
}

.wv-body-sm {
  font-family: var(--wv-font-body);
  font-weight: 400;
  font-size: var(--wv-body-sm);
  line-height: var(--wv-leading-normal);
  letter-spacing: 0.030em;
  color: var(--wv-fg-2);
}

.wv-caption {
  font-family: var(--wv-font-display);
  font-weight: 400;
  font-size: var(--wv-caption);
  letter-spacing: 0.06em;
  color: var(--wv-fg-3);
  text-transform: uppercase;
}

.wv-pull-quote {
  font-family: var(--wv-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.25;
  letter-spacing: 0.035em;
}