/* Hingham Growth Partners — Colors & Type
 * ----------------------------------------
 * Brand essence: institutional New England VC firm. Heritage craft (the
 * Hingham wooden bucket) meets serious capital markets. Dark navy ground,
 * white serif wordmark, red bucket accent, deep maroon outline.
 */

/* ===========================================================
 *  FONTS — substitutions flagged in README
 *  Display: Playfair Display (substitute for the wordmark serif)
 *  Body:    Inter (substitute for deck body sans)
 *  Numerics use Inter tabular figures for stat slides
 * =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- COLOR — Brand (RED IS LEAD) ---------- */
  --hgp-red:        #A42721;  /* the deck's signature brick red — primary ground */
  --hgp-red-deep:   #8E1F1A;  /* hover / pressed / shadow side */
  --hgp-red-soft:   #B9342E;  /* slightly lifted red for hover surfaces */
  --hgp-red-bright: #C81818;  /* the bucket red — use only for active accents on red */
  --hgp-maroon:     #5C1410;  /* deep oxblood, used in red-on-red rules and edges */
  --hgp-maroon-deep:#380808;  /* bucket outline, deepest accent */
  --hgp-cream:      #F4ECDF;  /* warm paper for occasional light slides */
  --hgp-cream-soft: #FAF6EE;

  /* ---------- COLOR — Ground (NAVY = ACCENT, NOT LEAD) ---------- */
  --hgp-navy:       #0E1320;  /* used only as thin rule / footer accent on red ground */
  --hgp-navy-soft:  #161D2E;
  --hgp-ink:        #06090F;  /* near-black detail */
  --hgp-bone:       #FFFFFF;  /* wordmark color, body text on red */

  /* ---------- COLOR — Neutrals ---------- */
  --hgp-fog-95: #F7F7F5;
  --hgp-fog-90: #ECEBE6;
  --hgp-fog-80: #D8D6CE;
  --hgp-fog-60: #A8A69A;
  --hgp-fog-40: #6B6A62;
  --hgp-fog-20: #3A3A36;
  --hgp-fog-10: #1F1F1D;

  /* ---------- SEMANTIC — Foreground ----------
     Defaults are LIGHT-context (cream/white surface). When the surface is
     red or navy, wrap in .on-red or .on-navy to flip --fg-1/2/3.
     The deck slides use these modifiers via the .red-ground class on each
     <section>. This keeps card/web-page UI working while letting slides
     opt into the inverted scale. */
  --fg-1: var(--hgp-ink);                  /* primary text — default light */
  --fg-2: var(--hgp-fog-40);               /* secondary text — default light */
  --fg-3: var(--hgp-fog-60);               /* tertiary text — default light */
  --fg-on-red-1: var(--hgp-bone);          /* primary on red */
  --fg-on-red-2: rgba(255,255,255,0.78);
  --fg-on-red-3: rgba(255,255,255,0.55);
  --fg-on-light-1: var(--hgp-ink);
  --fg-on-light-2: var(--hgp-fog-40);
  --fg-on-light-3: var(--hgp-fog-60);
  --fg-on-navy-1: var(--hgp-bone);
  --fg-on-navy-2: rgba(255,255,255,0.72);
  --fg-on-navy-3: rgba(255,255,255,0.48);
  --fg-accent: var(--hgp-red);             /* on a light surface, the accent that draws the eye is red */
  --fg-accent-strong: var(--hgp-maroon-deep);
  --fg-accent-navy: var(--hgp-navy);       /* navy is the secondary accent */

  /* ---------- SEMANTIC — Background ---------- */
  --bg-page:     var(--hgp-red);           /* RED is the lead ground */
  --bg-page-2:   var(--hgp-red-deep);      /* alternate red for variety */
  --bg-light:    var(--hgp-cream-soft);    /* occasional light slides */
  --bg-light-2:  var(--hgp-cream);
  --bg-surface:  #FFFFFF;
  --bg-dark:     var(--hgp-navy);          /* used sparingly: rules, footer accents */
  --bg-accent:   var(--hgp-navy);
}

/* ----- Surface modifier classes — flip --fg-1/2/3 by ground ----- */
.on-red {
  --fg-1: var(--fg-on-red-1);
  --fg-2: var(--fg-on-red-2);
  --fg-3: var(--fg-on-red-3);
  --fg-accent: var(--hgp-cream);           /* on red, the accent is cream/white */
  color: var(--fg-1);
}
.on-navy {
  --fg-1: var(--fg-on-navy-1);
  --fg-2: var(--fg-on-navy-2);
  --fg-3: var(--fg-on-navy-3);
  --fg-accent: var(--hgp-red-bright);
  color: var(--fg-1);
}
:root {

  /* ---------- BORDERS ---------- */
  --border-on-red-1: rgba(255,255,255,0.18);   /* hairlines on red ground */
  --border-on-red-2: rgba(255,255,255,0.32);
  --border-on-red-deep: rgba(56,8,8,0.5);      /* maroon-tinted divider on red */
  --border-on-light-1: rgba(14,19,32,0.10);
  --border-on-light-2: rgba(14,19,32,0.18);
  --border-accent: var(--hgp-navy);            /* navy is the accent border */

  /* ---------- TYPE — Families ---------- */
  --font-display: 'Playfair Display', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --font-sans:    'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- TYPE — Scale (designed for 1920×1080 decks) ---------- */
  --fs-display:  104px;  /* hero numbers like $5.6B */
  --fs-h1:       68px;
  --fs-h2:       48px;
  --fs-h3:       34px;
  --fs-h4:       26px;
  --fs-body-lg:  22px;
  --fs-body:     18px;
  --fs-meta:     14px;
  --fs-eyebrow:  12px;

  /* ---------- TYPE — Weights ---------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- TYPE — Tracking ---------- */
  --tr-tight: -0.02em;
  --tr-normal: 0;
  --tr-wide: 0.08em;
  --tr-eyebrow: 0.18em;  /* used on "GROWTH PARTNERS"-style labels */

  /* ---------- TYPE — Leading ---------- */
  --lh-display: 1.02;
  --lh-tight:   1.12;
  --lh-snug:    1.25;
  --lh-body:    1.5;

  /* ---------- SPACING ---------- */
  --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 ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-sm:   0 1px 2px rgba(14,19,32,0.06), 0 1px 1px rgba(14,19,32,0.04);
  --shadow-md:   0 6px 18px rgba(14,19,32,0.08), 0 2px 4px rgba(14,19,32,0.05);
  --shadow-lg:   0 24px 48px rgba(14,19,32,0.14), 0 6px 12px rgba(14,19,32,0.06);
  --shadow-card: 0 1px 0 rgba(14,19,32,0.04), 0 12px 32px rgba(14,19,32,0.08);
  --shadow-on-dark: 0 30px 60px rgba(0,0,0,0.45);
}

/* ===========================================================
 *  SEMANTIC ELEMENT STYLES
 * =========================================================== */
.hgp-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
}
.hgp-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.hgp-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.hgp-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.hgp-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
.hgp-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.hgp-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.hgp-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.hgp-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--fg-2);
}
.hgp-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  line-height: 1.4;
}
.hgp-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-feature-settings: 'tnum' 1;
  letter-spacing: var(--tr-tight);
}