/* ============================================================
   FULCRUM PRODUCT WORKS — Colors & Type Foundations
   ------------------------------------------------------------
   Canonical Brand Guide direction: deep-slate / near-black ink,
   a single signal-GREEN accent (#22B24D), cool off-white ground.
   Industrial precision — drafting table, structural engineering.
   Sharp geometry, hairline rules, generous whitespace.

   Two fonts only (per the Brand Guide): Space Grotesk (display)
   + Inter (body/UI). No serif, no mono, no decorative type.
   No gradients (a subtle dark-to-dark hero texture is the only
   exception). The green is the ONE saturated color — a signal,
   never a large fill.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- DARK GROUNDS (primary anchor) ---------- */
  --slate:       #22312E;   /* deep slate — primary dark ground (hero) */
  --slate-2:     #1A2724;   /* deeper slate — alt dark panels */
  --ink:         #0D0F14;   /* near-black — darkest ground / footer */

  /* ---------- SIGNAL GREEN — the one accent ---------- */
  --green:       #22B24D;   /* signal green — eyebrows, CTA, underbar, rules */
  --green-deep:  #1B8E3E;   /* pressed / hover-darken */
  --green-soft:  #7FD79A;   /* lifted green — accents on dark grounds */

  /* ---------- LIGHT GROUNDS ---------- */
  --ground:      #F4F6F5;   /* cool off-white — primary light ground */
  --ground-2:    #E9ECEB;   /* deeper cool gray — insets, tags */
  --paper:       #FFFFFF;   /* white — cards, raised panels */
  --white:       #FFFFFF;

  /* ---------- TEXT ---------- */
  --text-strong: #1A201E;   /* headings on light */
  --text-body:   #2C332F;   /* body on light */
  --text-muted:  #5C6562;   /* secondary text on light */
  --text-subtle: #8A938F;   /* tertiary / captions on light */
  --on-dark:     #F4F6F5;   /* headings/body on dark */
  --on-dark-muted: #A9B2AF; /* muted body on dark */

  /* ---------- LINES ---------- */
  --hair:        #DDE1E0;   /* hairline rule on light */
  --hair-dark:   rgba(244,246,245,0.14); /* hairline on dark */

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:          var(--ground);
  --bg-raised:   var(--paper);
  --bg-inset:    var(--ground-2);
  --bg-inverse:  var(--slate);
  --bg-ink:      var(--ink);

  --fg:          var(--text-strong);
  --fg-body:     var(--text-body);
  --fg-muted:    var(--text-muted);
  --fg-subtle:   var(--text-subtle);
  --fg-on-dark:  var(--on-dark);
  --fg-on-dark-muted: var(--on-dark-muted);

  --accent:        var(--green);
  --accent-press:  var(--green-deep);
  --accent-soft:   var(--green-soft);
  --link:          var(--green-deep);

  --border:        var(--hair);
  --border-strong: var(--slate);

  /* ---------- TYPE FAMILIES (two only) ---------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- TYPE SCALE (px) ---------- */
  --text-2xs: 10px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  20px;
  --text-xl:  28px;
  --text-2xl: 40px;
  --text-3xl: 56px;
  --text-4xl: 72px;
  --text-5xl: 96px;

  /* ---------- WEIGHTS ---------- */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---------- TRACKING ---------- */
  --track-tight:  -0.035em;  /* large display headlines */
  --track-snug:   -0.02em;   /* mid headings */
  --track-normal:  0;
  --track-label:   0.16em;   /* uppercase eyebrow labels */
  --track-wide:    0.22em;   /* wordmark / wide subtags */

  /* ---------- LINE HEIGHT ---------- */
  --lh-solid:   0.98;
  --lh-tight:   1.06;
  --lh-snug:    1.18;
  --lh-normal:  1.55;
  --lh-relaxed: 1.65;

  /* ---------- RADIUS — sharp ---------- */
  --radius-sharp: 0px;    /* rules, underbar, panels */
  --radius:       2px;    /* default structural radius */
  --radius-md:    4px;    /* inputs, buttons */
  --radius-pill:  999px;  /* status dots only */

  /* ---------- SPACING (4px base grid) ---------- */
  --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;

  /* ---------- ELEVATION ----------
     Tight, low, near-monochrome. Most "elevation" is hairline
     border + value shift (ground → paper), not drop shadow. */
  --shadow-hairline: 0 0 0 1px var(--hair);
  --shadow-sm:  0 1px 2px rgba(13,15,20,0.06);
  --shadow-md:  0 2px 8px rgba(13,15,20,0.08), 0 0 0 1px rgba(13,15,20,0.03);
  --shadow-lg:  0 14px 36px rgba(13,15,20,0.14);

  /* ---------- MOTION — restrained ---------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast:    0.15s;
  --dur:         0.22s;
  --dur-slow:    0.4s;
}

/* ============================================================
   SELF-HOSTED FONT FALLBACK (optional, for offline use)
   Place TTFs in /fonts and uncomment.
   ============================================================ */
/*
@font-face { font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Variable.ttf') format('truetype'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Variable.ttf') format('truetype'); font-weight:400 700; font-display:swap; }
*/

/* ============================================================
   BASE / SEMANTIC TYPE STYLES
   ============================================================ */

.fpw, body.fpw {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: var(--text-md);
  line-height: var(--lh-normal);
}

/* Display headline — Space Grotesk bold, tight tracking.
   Hero + section headlines. End major headlines with a period. */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(44px, 7vw, 96px);
  line-height: var(--lh-solid);
  letter-spacing: var(--track-tight);
  color: var(--slate);
  text-wrap: balance;
}

.h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--slate);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--slate);
}
.h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--slate);
}

/* Large pull-quote — display font, lighter weight, big & calm */
.quote {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(28px, 4vw, 56px);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.quote em { font-style: normal; color: var(--green); }

/* Body copy */
.lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-body);
  text-wrap: pretty;
}
.p {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
  text-wrap: pretty;
}
.p-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Eyebrow label — BODY font, uppercase, letter-spaced, green.
   The signature section-opener device. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--green);
}

/* Label / annotation — body font, uppercase, letter-spaced, muted */
.label {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Section number — display font, muted, large */
.section-num {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

/* The green underbar — the brand's primary "mark" device */
.underbar {
  display: block;
  width: 40px;
  height: 4px;
  background: var(--green);
  border-radius: 0;
}

a { color: var(--link); text-decoration: none; }