/*
  ╔══════════════════════════════════════════════════════════════╗
  ║  LEAD FROG — BRAND THEME                                     ║
  ║  Swap variable values here to change the entire site theme.  ║
  ║  Current: DARK (deep forest green + lime accent)             ║
  ╚══════════════════════════════════════════════════════════════╝

  TO SWITCH TO LIGHT THEME — replace the values below with:
  --bg:              #f4f7f2;
  --surface:         #ffffff;
  --surface-alt:     #eef3eb;
  --header-bg:       rgba(255,255,255,0.92);
  --header-border:   rgba(58,130,73,0.15);
  --white:           #1a2e1c;
  --muted:           #5a7060;
  --border:          rgba(58,130,73,0.18);
  --footer-bg:       #e4ede1;
  --footer-border:   rgba(58,130,73,0.12);
  --hero-overlay-start: rgba(244,247,242,0.2);
  --hero-overlay-end:   rgba(244,247,242,0.75);
*/

:root {
  /* ── Core backgrounds ── */
  --bg:              #1b211c;
  --surface:         #1e2620;
  --surface-alt:     #192019;

  /* ── Header ── */
  --header-bg:       rgba(27,33,28,0.92);
  --header-border:   rgba(100,200,90,0.15);

  /* ── Text ── */
  --white:           #edf2eb;
  --muted:           #7a9c7e;

  /* ── Accent — change this pair to recolour all buttons & highlights ── */
  --accent:          #6dc85a;
  --accent-light:    #8edc7a;
  --accent-dark:     #4fa83c;

  /* ── CTA button (header "Get Started") ── */
  --cta-bg:          #3a7a2e;
  --cta-bg-hover:    #6dc85a;
  --cta-color:       #edf2eb;
  --cta-color-hover: #1b211c;

  /* ── Borders & dividers ── */
  --border:          rgba(100,200,90,0.18);

  /* ── Footer ── */
  --footer-bg:       #151c16;
  --footer-border:   rgba(100,200,90,0.1);

  /* ── Hero overlay gradient ── */
  --hero-overlay-start: rgba(27,33,28,0.25);
  --hero-overlay-end:   rgba(27,33,28,0.72);

  /* ── Typography ── */
  --font-display:    'Bebas Neue', sans-serif;
  --font-body:       'DM Sans', sans-serif;
  --font-condensed:  'Open Sans', sans-serif;
}

/* ════════════════════════════════════════════════════════════════
   DISPLAY SCALE — edit here to change all headlines sitewide.
   ════════════════════════════════════════════════════════════════ */

/* All hero h1s — every page */
.display-hero {
  font-size: clamp(44px, 7.5vw, 88px);
  line-height: 0.88;
  letter-spacing: 0.02em;
}

/* All section headings & bottom-CTA h2s — every page */
.display-section {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 0.92;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════
   BODY TEXT STANDARD — edit here to change all body/card/desc text sitewide.
   ════════════════════════════════════════════════════════════════ */

.body-text {
  font-size: 16px;
  line-height: 1.75;
}

/* ════════════════════════════════════════════════════════════════
   CONDENSED TEXT LADDER — the muted Open Sans Condensed copy that
   appears under headings, in intros, and inside cards. Each rung is a
   complete style (font + colour + size) so pages use ONE class instead
   of repeating inline styles. Change a size here once → updates sitewide.
     .text-lead    19px  — hero sub-line / lead paragraph (most prominent)
     .section-sub  17px  — paragraph directly under a section heading
     .body-text    16px  — standard body copy (defined above)
     .text-card    15px  — text inside cards (most compact)
   ════════════════════════════════════════════════════════════════ */
.text-lead {
  font-family: var(--font-condensed); font-stretch: condensed;
  color: var(--muted); font-size: 19px; line-height: 1.8;
}
.section-sub {
  font-family: var(--font-condensed); font-stretch: condensed;
  color: var(--muted); font-size: 17px; line-height: 1.8;
  margin-top: 30px; margin-bottom: 0;
}
.text-card {
  font-family: var(--font-condensed); font-stretch: condensed;
  color: var(--muted); font-size: 15px; line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════
   COMPATIBILITY BRIDGE (added 2026-06-30)
   shared.css was authored against a --color-* / --text-* token system.
   This maps those names onto the brand tokens above so shared.css
   (body background, header, footer, shared components) renders correctly.
   ════════════════════════════════════════════════════════════════ */
:root {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-alt: var(--surface-alt);
  --color-text: var(--white);
  --color-heading: var(--white);
  --color-text-muted: var(--muted);
  --color-text-subtle: var(--muted);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-dark);
  --color-primary: var(--accent);
  --color-success: var(--accent);
  --color-error: #d9544f;
  --color-border: var(--border);
  --color-border-hover: rgba(100,200,90,0.35);
  --color-btn-text: var(--bg);
  --color-header-bg: var(--header-bg);
  --color-header-bg-scrolled: var(--header-bg);
  --font-heading: var(--font-display);
  --text-hero: clamp(44px, 7.5vw, 88px);
  --text-section: clamp(28px, 4vw, 52px);
  --text-body-lg: 19px;
  --text-body: 16px;
  --text-card-title: 22px;
  --text-eyebrow: 11px;
  --text-sm: 14px;
  --text-xs: 12px;
  --leading-hero: 0.9;
  --leading-heading: 1.1;
  --leading-body: 1.75;
  --leading-relaxed: 1.8;
  --tracking-heading: 0.02em;
  --tracking-eyebrow: 0.2em;
  --tracking-btn: 0.05em;
  --tracking-body: 0;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --radius-btn: 8px;
  --radius-card: 16px;
  --radius-input: 8px;
  --shadow-btn: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.25);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-popup: 0 20px 60px rgba(0,0,0,0.5);
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
  --header-height: 72px;
  --max-width: 1200px;
  --max-width-text: 680px;
  --section-gap: 96px;
  --card-padding: 32px;
  --heading-to-content: 30px;
  --overlay-hero: linear-gradient(var(--hero-overlay-start), var(--hero-overlay-end));
  --z-header: 1000;
  --z-popup: 2000;
}