/* ============================================================
   YOUR FINANCE GIRL — COLORS & TYPE
   Warm, editorial, confidently friendly. Serif-first.
   ============================================================ */

/* ---------- FONT FACES ---------- */

/* Merriweather 24pt — UI / body / small display */
@font-face { font-family: "Merriweather"; font-weight: 300; font-style: normal;
  src: url("fonts/Merriweather24-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather"; font-weight: 400; font-style: normal;
  src: url("fonts/Merriweather24-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather"; font-weight: 400; font-style: italic;
  src: url("fonts/Merriweather24-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather"; font-weight: 500; font-style: normal;
  src: url("fonts/Merriweather24-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather"; font-weight: 600; font-style: normal;
  src: url("fonts/Merriweather24-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather"; font-weight: 700; font-style: normal;
  src: url("fonts/Merriweather24-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather"; font-weight: 700; font-style: italic;
  src: url("fonts/Merriweather24-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather"; font-weight: 800; font-style: normal;
  src: url("fonts/Merriweather24-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather"; font-weight: 900; font-style: normal;
  src: url("fonts/Merriweather24-Black.ttf") format("truetype"); font-display: swap; }

/* Merriweather 96pt — hero / headline display optical size */
@font-face { font-family: "Merriweather Display"; font-weight: 400;
  src: url("fonts/Merriweather96-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather Display"; font-weight: 400; font-style: italic;
  src: url("fonts/Merriweather96-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather Display"; font-weight: 700;
  src: url("fonts/Merriweather96-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather Display"; font-weight: 900;
  src: url("fonts/Merriweather96-Black.ttf") format("truetype"); font-display: swap; }

/* Merriweather 120pt — poster / reel cover display */
@font-face { font-family: "Merriweather Poster"; font-weight: 700;
  src: url("fonts/Merriweather120-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather Poster"; font-weight: 800;
  src: url("fonts/Merriweather120-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Merriweather Poster"; font-weight: 900;
  src: url("fonts/Merriweather120-Black.ttf") format("truetype"); font-display: swap; }

/* Instrument Serif — italicized display accents, pull-quotes */
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: normal;
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic;
  src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-display: swap; }

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* -- Brand core -- */
  --yfg-yellow:        #FFEF03;   /* hero highlight / reel cover */
  --yfg-yellow-soft:   #FFF6A1;   /* warm wash, backgrounds */
  --yfg-yellow-deep:   #E8D902;   /* press state / small accents */

  --yfg-forest:        #2C4A3E;   /* primary ink / grown-up anchor */
  --yfg-forest-deep:   #1E3329;   /* pressed states, long reading text */
  --yfg-forest-soft:   #4A6B5E;   /* secondary text */
  --yfg-forest-wash:   #E8EFEB;   /* quiet backgrounds */

  /* Warm neutrals — soft, paper-like */
  --yfg-cream:         #FAF5EC;   /* default page background */
  --yfg-cream-deep:    #F2EADB;   /* card surface / subtle alt */
  --yfg-bone:          #FFFDF7;   /* inner surface / tooltip */
  --yfg-ink:           #1A1713;   /* body copy, warm black */
  --yfg-ink-soft:      #5B544A;   /* captions, meta */
  --yfg-rule:          #D9D0BE;   /* hairlines, dividers */

  /* Warm supporting accents */
  --yfg-terracotta:    #C5613F;   /* secondary warm accent */
  --yfg-blush:         #F5D7C6;   /* wash */
  --yfg-gold:          #B89530;   /* serious "money" accent */

  /* Semantic */
  --yfg-success:       #4A7C59;
  --yfg-warning:       #D4A017;
  --yfg-danger:        #B84A3C;
  --yfg-info:          #4A6B8A;

  /* ---- Semantic color roles ---- */
  --bg:                var(--yfg-cream);
  --bg-alt:            var(--yfg-cream-deep);
  --surface:           var(--yfg-bone);
  --fg1:               var(--yfg-ink);          /* primary text */
  --fg2:               var(--yfg-ink-soft);     /* secondary text */
  --fg-brand:          var(--yfg-forest);       /* brand ink */
  --accent:            var(--yfg-yellow);       /* loud accent */
  --accent-soft:       var(--yfg-yellow-soft);
  --rule:              var(--yfg-rule);

  /* -- Type families -- */
  --font-display:   "Merriweather Poster", "Merriweather Display", "Merriweather", Georgia, serif;
  --font-headline:  "Merriweather Display", "Merriweather", Georgia, serif;
  --font-body:      "Merriweather", Georgia, "Times New Roman", serif;
  --font-accent:    "Instrument Serif", "Merriweather", Georgia, serif;  /* italics & quotes */
  --font-mono:      "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* -- Spacing (4px base) -- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* -- Radii — generous, rounded -- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-2xl: 48px;
  --radius-pill: 999px;

  /* -- Shadows — soft, warm-tinted -- */
  --shadow-xs: 0 1px 2px rgba(44, 74, 62, 0.06);
  --shadow-sm: 0 2px 6px rgba(44, 74, 62, 0.08);
  --shadow-md: 0 8px 20px rgba(44, 74, 62, 0.10);
  --shadow-lg: 0 20px 40px rgba(44, 74, 62, 0.12);
  --shadow-press: inset 0 2px 6px rgba(30, 51, 41, 0.18);

  /* -- Motion -- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}

/* ---------- SEMANTIC TYPE RULES ---------- */

html { color: var(--fg1); background: var(--bg); font-family: var(--font-body); }

/* Headline hierarchy — serif display, tight tracking */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--fg-brand);
  text-wrap: balance;
  margin: 0;
}
/* Display headline often uses italic Instrument Serif for one highlighted word */
h1 em, .h1 em, .display-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg-brand);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-brand);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--fg1);
  margin: 0;
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg1);
  text-wrap: pretty;
}
.body-lg { font-size: 20px; line-height: 1.5; }
.body-sm { font-size: 15px; line-height: 1.5; color: var(--fg2); }

/* Eyebrow / kicker — small caps style tag above headlines */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Pullquote / editorial aside */
.pullquote {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  color: var(--fg-brand);
  letter-spacing: -0.005em;
}

/* Meta — numeric stats & counters */
.stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--fg-brand);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--fg2);
}

/* Small caps label for section tags */
.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

a { color: var(--fg-brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--yfg-forest-deep); text-decoration-color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-6) 0; }

::selection { background: var(--yfg-yellow); color: var(--yfg-forest-deep); }