/* ============================================================
   SeedLift Design System — colors & typography tokens
   ============================================================
   A modern, minimal, technical-but-warm system.
   Closer to Linear/Stripe than a traditional agency site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --sl-green-50:  #F1F6F0;
  --sl-green-100: #DCE8DA;
  --sl-green-200: #B8D1B5;
  --sl-green-300: #8DB489;
  --sl-green-400: #6F9D6C;
  --sl-green-500: #5B8C5A;  /* primary brand accent — the logo green */
  --sl-green-600: #4A7449;
  --sl-green-700: #3B5D3A;
  --sl-green-800: #2D482C;
  --sl-green-900: #1F3220;

  /* ---------- Neutrals (warm gray) ---------- */
  --sl-ink-0:    #FFFFFF;
  --sl-ink-25:   #FBFBFA;   /* page bg */
  --sl-ink-50:   #F6F6F4;   /* panel bg */
  --sl-ink-100:  #EEEEEA;   /* soft divider */
  --sl-ink-200:  #DEDED9;   /* border */
  --sl-ink-300:  #C2C2BC;   /* subtle border */
  --sl-ink-400:  #9A9A93;   /* disabled text */
  --sl-ink-500:  #6B6B65;   /* secondary text */
  --sl-ink-600:  #4A4A45;
  --sl-ink-700:  #2F2F2B;   /* body text */
  --sl-ink-800:  #1C1C19;   /* headings */
  --sl-ink-900:  #0E0E0C;   /* deepest / near-black */

  /* ---------- Semantic ---------- */
  --bg:            var(--sl-ink-25);
  --bg-panel:      var(--sl-ink-50);
  --bg-elevated:   var(--sl-ink-0);
  --bg-inverse:    var(--sl-ink-900);

  --fg-1:          var(--sl-ink-800);   /* primary text / headings */
  --fg-2:          var(--sl-ink-700);   /* body */
  --fg-3:          var(--sl-ink-500);   /* secondary */
  --fg-4:          var(--sl-ink-400);   /* tertiary / metadata */
  --fg-inverse:    var(--sl-ink-0);

  --accent:        var(--sl-green-500);
  --accent-hover:  var(--sl-green-600);
  --accent-soft:   var(--sl-green-50);
  --accent-border: var(--sl-green-200);
  --variable:      var(--sl-green-600);  /* {{firstName}} highlighting */
  --variable-bg:   var(--sl-green-50);

  --border:        var(--sl-ink-200);
  --border-strong: var(--sl-ink-300);
  --divider:       var(--sl-ink-100);

  --success:       #3B7A3A;
  --warning:       #B8860B;
  --danger:        #B3261E;

  /* ---------- Typography ---------- */
  --font-sans:     'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display:  'Geist', ui-sans-serif, system-ui, sans-serif;   /* same as sans, weight-driven */
  --font-serif:    'Newsreader', 'Iowan Old Style', Georgia, serif;  /* occasional editorial accent — roman, not italic */

  /* Type scale — tight hierarchy, display-led */
  --text-xs:    12px;   --lh-xs:   1.4;
  --text-sm:    13px;   --lh-sm:   1.5;
  --text-base:  15px;   --lh-base: 1.55;
  --text-md:    17px;   --lh-md:   1.5;
  --text-lg:    20px;   --lh-lg:   1.4;
  --text-xl:    24px;   --lh-xl:   1.3;
  --text-2xl:   32px;   --lh-2xl:  1.2;
  --text-3xl:   44px;   --lh-3xl:  1.1;
  --text-4xl:   64px;   --lh-4xl:  1.02;
  --text-5xl:   88px;   --lh-5xl:  0.98;
  --text-6xl:   128px;  --lh-6xl:  0.95;  /* for big stat displays */

  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ---------- Shadows (restrained; borders-first system) ---------- */
  --shadow-xs: 0 1px 0 rgba(14,14,12,0.04);
  --shadow-sm: 0 1px 2px rgba(14,14,12,0.05), 0 0 0 1px rgba(14,14,12,0.04);
  --shadow-md: 0 4px 10px -2px rgba(14,14,12,0.06), 0 2px 4px -2px rgba(14,14,12,0.04);
  --shadow-lg: 0 16px 32px -8px rgba(14,14,12,0.10), 0 4px 8px -2px rgba(14,14,12,0.04);
  --shadow-focus: 0 0 0 3px rgba(91,140,90,0.25);

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

/* ============================================================
   Semantic element styles (opt-in via class="sl-*")
   Apply these only inside explicitly-scoped containers.
   ============================================================ */

.sl-prose, .sl-scope {
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — giant stat numbers, hero headlines */
.sl-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--lh-5xl);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-1);
}

/* H1 — page titles */
.sl-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-1);
}
.sl-h2 {
  font-size: var(--text-3xl); line-height: var(--lh-3xl);
  letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-1);
}
.sl-h3 {
  font-size: var(--text-2xl); line-height: var(--lh-2xl);
  letter-spacing: var(--tracking-snug); font-weight: 600; color: var(--fg-1);
}
.sl-h4 {
  font-size: var(--text-xl); line-height: var(--lh-xl);
  letter-spacing: var(--tracking-snug); font-weight: 600; color: var(--fg-1);
}
.sl-h5 {
  font-size: var(--text-lg); line-height: var(--lh-lg);
  font-weight: 600; color: var(--fg-1);
}

.sl-p   { font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg-2); }
.sl-lead {
  font-size: var(--text-md); line-height: 1.55; color: var(--fg-2);
  letter-spacing: var(--tracking-snug);
}
.sl-small { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-3); }
.sl-micro { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg-3); }

/* Eyebrow / overline — uppercase label above section heads */
.sl-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Mono — for code, variables, metric counters */
.sl-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
}

/* Editorial serif — use sparingly, e.g. testimonial pull-quotes.
   Newsreader at a low optical size gives an editorial, un-fussy tone;
   we stay in roman (no italic) to keep the brand technical, not literary. */
.sl-quote {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'opsz' 36;
}

/* {{variable}} chip — the personalization highlight */
.sl-variable {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--variable);
  background: var(--variable-bg);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--accent-border);
  white-space: nowrap;
}

/* Metric display — the recurring big-number pattern in case studies */
.sl-metric-value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.sl-metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: var(--space-2);
}