/* ============================================================
   MONTCALI CAPITAL — Foundations: Color & Type
   Brand: deep-forest-green mountain. Warm, human, modern, clean.
   Anti-"private-equity": founder-to-founder, builderly, calm.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- TYPE FAMILIES ----------
     --font-serif : Spectral. Headlines, document titles, pull quotes.
                    Echoes the engraved-Roman wordmark; warm + literary.
     --font-sans  : Hanken Grotesk. Body, UI, labels. Clean, friendly.
     --font-mono  : IBM Plex Mono. Eyebrows, metric/figure labels, kickers. */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- BRAND GREEN SCALE (primary) ----------
     Deep forest green — rich and grounded, anchored on #3E5235.
     Shifted off the original teal toward forest green + earthy brown. */
  --green-900: #1A2614;
  --green-800: #22301A;
  --green-700: #2A3A20;
  --green-600: #344727;
  --green-500: #3E5235;  /* brand primary — deep forest */
  --green-400: #5E7650;
  --green-300: #93A883;
  --green-200: #C2CFB5;
  --green-100: #E4EADC;
  --green-50:  #F2F5EC;

  /* ---------- INK (deep warm forest near-black) ---------- */
  --ink:       #1E2917;  /* primary text / dark sections */
  --ink-700:   #313F28;
  --ink-500:   #4A5742;

  /* ---------- WARM PAPER NEUTRALS ---------- */
  --paper:    #FAF7F1;   /* page background — warm cream, not sterile white */
  --paper-2:  #F2EDE3;   /* alternating section / sand wash */
  --surface:  #FFFFFF;   /* cards, document body */
  --line:     #E6DFD1;   /* hairline borders, warm */
  --line-2:   #D7CDB8;   /* stronger divider */

  /* ---------- STONE (muted earthy sand/taupe neutrals) ---------- */
  --stone-600: #6C6450;
  --stone-500: #8A7F66;
  --stone-300: #C8BDA4;

  /* ---------- CLAY ACCENT (sparing — sunrise on the ridge) ---------- */
  --clay-600: #A85B36;
  --clay-500: #C0703F;
  --clay-300: #DCA77F;
  --clay-100: #F2E4D8;

  /* ---------- SEMANTIC SURFACES & TEXT ---------- */
  --fg-1: var(--ink);        /* primary text */
  --fg-2: #4E5A48;           /* secondary text */
  --fg-3: #7F836F;           /* muted / captions */
  --fg-on-dark:    #F1F0E8;  /* text on ink/green */
  --fg-on-dark-2:  #BDC6B5;  /* secondary text on dark */

  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-surface: var(--surface);
  --bg-ink: var(--ink);
  --bg-green: var(--green-500);

  --border:        var(--line);
  --border-strong: var(--line-2);

  /* ---------- INTERACTIVE ---------- */
  --primary:        var(--green-500);
  --primary-hover:  var(--green-600);
  --primary-press:  var(--green-700);
  --accent:         var(--clay-500);
  --accent-hover:   var(--clay-600);
  --focus-ring:     rgba(62,82,53,0.35);

  /* ---------- STATUS ---------- */
  --positive: #3E7D5A;
  --negative: #B04A3C;
  --warning:  var(--clay-600);

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- ELEVATION (soft, warm-tinted, never harsh) ---------- */
  --shadow-xs: 0 1px 2px rgba(31,44,43,0.05);
  --shadow-sm: 0 1px 3px rgba(31,44,43,0.06), 0 1px 2px rgba(31,44,43,0.04);
  --shadow-md: 0 4px 14px rgba(31,44,43,0.07), 0 2px 5px rgba(31,44,43,0.05);
  --shadow-lg: 0 18px 44px rgba(31,44,43,0.10), 0 6px 14px rgba(31,44,43,0.06);

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

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* calm ease-out, no bounce */
  --dur:  220ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */
.m-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-600);
}
.m-display {            /* hero / cover headlines */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.m-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.m-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.14;
  color: var(--fg-1);
}
.m-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.m-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--fg-1);
}
.m-lead {               /* intro paragraph / standfirst */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: var(--fg-2);
}
.m-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
}
.m-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-3);
}
.m-quote {              /* pull quote / testimonial */
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.m-metric {             /* big deal figure */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--green-700);
  font-feature-settings: "tnum" 1;
}
.m-label {              /* small caps label under a metric */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}