/* Design tokens for the 2026 site redesign.
   Values come from the "Fletch Website Designs" Figma file (For Development / home). */
:root {
  --fl-ink: #151a26;
  --fl-ink-80: rgba(21, 26, 38, 0.8);
  --fl-ink-06: rgba(21, 26, 38, 0.06);
  --fl-surface: #f2f3f5;
  --fl-surface-90: rgba(242, 243, 245, 0.9);
  --fl-text: #151a26;
  --fl-text-muted: #484d58;
  --fl-green: #267b4c;
  --fl-green-dark: #1f6740;
  --fl-mint: #d7ecd2;
  --fl-cta-hover: #deefda;
  /* Green for links on dark grounds — brand green only reaches 1.6:1 on the
     footer's #07366f band, this reaches 7.9:1. */
  --fl-green-light: #79ec80;
  --fl-blue: #1e4890;
  --fl-white: #ffffff;

  --fl-radius-pill: 999px;
  --fl-radius-card: 24px;

  --fl-shadow-lg: 4px 4px 0 0 var(--fl-ink);
  --fl-shadow-md: 3px 3px 0 0 var(--fl-ink);
  --fl-shadow-sm: 2px 2px 0 0 var(--fl-ink);

  --fl-font-sans: "Karla", "Helvetica Neue", Arial, sans-serif;
  --fl-font-script: "Caveat", "Segoe Script", cursive;

  --fl-container: 1100px;
  --fl-main-width: 1180px;
  /* Clears the fixed header (~92px) and sits the hero a little lower in the
     first viewport so the block reads as centred under the nav. */
  --fl-main-pad-top: clamp(184px, calc((100vh - 440px) / 2), 268px);
  --fl-main-pad-bottom: 50px;
  --fl-section-gap: 200px;
  --fl-page-gutter: 40px;

  /* Section separator plates (Figma: "Section separator color 2" / Rect 19–22). */
  --fl-sep-fill: #dee8e2;
  --fl-sep-radius: 17px;
  --fl-sep-width: 1329.56px;
  --fl-sep-bleed: 74.78px;
  --fl-sep-pad-top: 68px;
  --fl-sep-pad-bottom: 76px;
}

/* Soft green rounded plate behind selected sections.
   Width / radius / fill match Figma; per-section pad vars match each rect. */
.fl-section-sep {
  position: relative;
  isolation: isolate;
  --fl-sep-pad-top: 68px;
  --fl-sep-pad-bottom: 76px;
}

.fl-section-sep::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--fl-sep-pad-top));
  bottom: calc(-1 * var(--fl-sep-pad-bottom));
  left: 50%;
  width: min(var(--fl-sep-width), calc(100vw - 32px));
  border-radius: var(--fl-sep-radius);
  background: var(--fl-sep-fill);
  transform: translateX(-50%);
  pointer-events: none;
}

@media (max-width: 1219px) {
  :root {
    --fl-page-gutter: 24px;
  }

  .fl-section-sep {
    --fl-sep-pad-top: 40px;
    --fl-sep-pad-bottom: 40px;
    --fl-sep-card-width: min(312px, 84%);
  }
}

@media (max-width: 600px) {
  .fl-section-sep {
    --fl-sep-pad-top: 28px;
    --fl-sep-pad-bottom: 28px;
    /* Inset white cards inside green plates so the plate reads on both sides. */
    --fl-sep-card-width: min(312px, 84%);
  }

  .fl-section-sep::before {
    border-radius: 14px;
  }
}