/* =============================================================================
   Fourfront — design tokens
   Tokens map 1:1 to what the Figma source uses. Semantic helpers below.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  /* -------- Color · brand --------------------------------------------------- */
  --ff-primary:        #072C22;   /* dark forest green — body text, dark sections */
  --ff-primary-ink:    #19392A;   /* slightly lifted, headline on dark sections   */
  --ff-accent:         #EAFE45;   /* lime — CTAs, highlights, the avatar mark    */
  --ff-bg:             #EBEEED;   /* page canvas — off-white with green undertone */
  --ff-bg-card:        #FFFFFF;   /* white card on light bg                      */
  --ff-bg-ivory:       #F6F7F3;   /* lime-tinted ivory chip background           */
  --ff-bg-mint:        #EFF3DF;   /* very pale lime, used on the engine diagram  */
  --ff-on-dark:        #ECF0EF;   /* primary text on dark sections               */

  /* -------- Color · neutrals (sampled from Figma usage counts) -------------- */
  --ff-ink-1:          #101010;   /* nav links, headings on light                */
  --ff-ink-2:          #2B4731;   /* deep green-grey card / dark photo card      */
  --ff-ink-3:          #577A5D;   /* mid green — strokes / hover on dark         */
  --ff-ink-4:          #7D908B;   /* mid grey — muted body                       */
  --ff-ink-5:          #BFC9C6;   /* light grey — divider / disabled             */
  --ff-ink-6:          #DDE1DF;   /* very light grey — large dividers            */
  --ff-line:           rgba(7,44,34,0.10);   /* default border on light          */
  --ff-line-dark:      rgba(255,255,255,0.10);/* default border on dark          */

  /* -------- Color · semantic / supporting (rare, deliberate) --------------- */
  --ff-warn:           #FE7645;   /* warm orange — only on the engine diagram    */
  --ff-error:          #C75F5F;   /* rust — error stroke                         */
  --ff-star:           #EF9C30;   /* amber — review stars only                   */

  /* -------- Type · families ------------------------------------------------- */
  --ff-font-primary:   "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
                       "Helvetica Neue", Arial, sans-serif;
  --ff-font-secondary: "Montserrat", var(--ff-font-primary);
  --ff-font-mono:      ui-monospace, "Source Code Pro", "SFMono-Regular", Menlo, monospace;

  /* -------- Type · scale ---------------------------------------------------- */
  --ff-fs-display-1:   56px;
  --ff-fs-display-2:   48px;
  --ff-fs-h1:          40px;
  --ff-fs-h2:          28px;
  --ff-fs-h3:          20px;
  --ff-fs-body-lg:     20px;
  --ff-fs-body:        18px;
  --ff-fs-body-sm:     16px;
  --ff-fs-meta:        15px;     /* nav links                                  */
  --ff-fs-eyebrow:     14px;
  --ff-fs-micro:       12px;

  --ff-lh-tight:       1.2;
  --ff-lh-snug:        1.3;
  --ff-lh-body:        1.5;
  --ff-lh-flat:        1.0;

  --ff-ls-tight:       -0.010em;
  --ff-ls-tighter:     -0.020em;
  --ff-ls-eyebrow:     0.060em;

  --ff-fw-regular:     400;
  --ff-fw-medium:      500;
  --ff-fw-semibold:    600;
  --ff-fw-bold:        700;

  /* -------- Spacing --------------------------------------------------------- */
  --ff-space-1:   4px;
  --ff-space-2:   8px;
  --ff-space-3:   12px;
  --ff-space-4:   16px;
  --ff-space-5:   24px;
  --ff-space-6:   32px;
  --ff-space-7:   48px;
  --ff-space-8:   64px;
  --ff-space-9:   80px;
  --ff-space-10:  100px;
  --ff-space-11:  160px;

  /* -------- Radius ---------------------------------------------------------- */
  --ff-radius-xs:   4px;
  --ff-radius-sm:   8px;     /* cards                                          */
  --ff-radius-md:   12px;    /* feature cards                                  */
  --ff-radius-lg:   20px;    /* team portraits                                 */
  --ff-radius-xl:   50px;    /* mobile screen mock                             */
  --ff-radius-pill: 9999px;  /* CTAs, chips                                    */

  /* -------- Shadow / elevation --------------------------------------------- */
  --ff-shadow-card:    0 4px 30px rgba(46, 45, 116, 0.05);   /* the only one   */
  --ff-shadow-divider: 0 1px 0 rgba(7, 44, 34, 0.08);
  --ff-shadow-floating: 0 12px 40px -8px rgba(7, 44, 34, 0.12);

  /* -------- Motion ---------------------------------------------------------- */
  --ff-ease:           cubic-bezier(0.2, 0.7, 0.2, 1);
  --ff-dur-fast:       150ms;
  --ff-dur:            220ms;
  --ff-dur-slow:       400ms;

  /* -------- Glass ---------------------------------------------------------- */
  --ff-glass-dark:     rgba(7, 44, 34, 0.85);
  --ff-glass-light:    rgba(255, 255, 255, 0.85);
  --ff-blur:           20px;

  /* -------- Layout ---------------------------------------------------------- */
  --ff-container:      1280px;
  --ff-gutter:         100px;
  --ff-gutter-mobile:  20px;
  --ff-nav-h:          80px;
}

/* =============================================================================
   Semantic / element resets
   ============================================================================= */

html, body {
  background: var(--ff-bg);
  color: var(--ff-primary);
  font-family: var(--ff-font-primary);
  font-size: var(--ff-fs-body);
  line-height: var(--ff-lh-body);
  letter-spacing: var(--ff-ls-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — sentence case, Plus Jakarta Sans 500 (medium) for display,
   700 (bold) only for buttons / micro headlines. */
h1, .h1 {
  font-size: var(--ff-fs-display-1);
  line-height: var(--ff-lh-tight);
  letter-spacing: var(--ff-ls-tight);
  font-weight: var(--ff-fw-medium);
  color: var(--ff-primary);
  margin: 0;
}
h2, .h2 {
  font-size: var(--ff-fs-display-2);
  line-height: var(--ff-lh-tight);
  letter-spacing: var(--ff-ls-tight);
  font-weight: var(--ff-fw-medium);
  color: var(--ff-primary);
  margin: 0;
}
h3, .h3 {
  font-size: var(--ff-fs-h1);
  line-height: var(--ff-lh-snug);
  letter-spacing: var(--ff-ls-tight);
  font-weight: var(--ff-fw-medium);
  color: var(--ff-primary);
  margin: 0;
}
h4, .h4 {
  font-size: var(--ff-fs-h2);
  line-height: var(--ff-lh-snug);
  letter-spacing: var(--ff-ls-tight);
  font-weight: var(--ff-fw-medium);
  color: var(--ff-primary);
  margin: 0;
}
h5, .h5 {
  font-size: var(--ff-fs-h3);
  line-height: var(--ff-lh-body);
  letter-spacing: var(--ff-ls-tight);
  font-weight: var(--ff-fw-semibold);
  color: var(--ff-primary);
  margin: 0;
}

p {
  font-size: var(--ff-fs-body);
  line-height: var(--ff-lh-body);
  letter-spacing: var(--ff-ls-tight);
  margin: 0;
  color: var(--ff-primary);
}

.eyebrow {
  font-size: var(--ff-fs-eyebrow);
  font-weight: var(--ff-fw-semibold);
  letter-spacing: var(--ff-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ff-primary);
}

.lead {
  font-size: var(--ff-fs-body-lg);
  line-height: var(--ff-lh-body);
  letter-spacing: var(--ff-ls-tight);
}

.meta {
  font-size: var(--ff-fs-meta);
  font-weight: var(--ff-fw-medium);
  color: var(--ff-ink-1);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ff-dur) var(--ff-ease);
}

/* =============================================================================
   Reusable primitives
   ============================================================================= */

.ff-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 6px 6px 6px 24px;
  border: 1px solid transparent;
  border-radius: var(--ff-radius-pill);
  font-family: var(--ff-font-primary);
  font-weight: var(--ff-fw-bold);
  font-size: var(--ff-fs-body);
  letter-spacing: var(--ff-ls-tighter);
  line-height: 26px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ff-dur) var(--ff-ease),
              color var(--ff-dur) var(--ff-ease),
              filter var(--ff-dur) var(--ff-ease);
}
.ff-btn--primary {
  background: var(--ff-accent);
  color: var(--ff-primary);
  border-color: rgba(234, 254, 69, 0.15);
}
.ff-btn--dark {
  background: var(--ff-primary);
  color: var(--ff-on-dark);
}
.ff-btn:active { filter: brightness(0.96); }

.ff-btn__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ff-primary);
  color: var(--ff-accent);
  transition: background-color var(--ff-dur) var(--ff-ease),
              color var(--ff-dur) var(--ff-ease);
}
.ff-btn--primary:hover .ff-btn__chip { background: var(--ff-primary-ink); }
.ff-btn--dark .ff-btn__chip { background: var(--ff-accent); color: var(--ff-primary); }
.ff-btn--dark:hover .ff-btn__chip { background: var(--ff-on-dark); }

.ff-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--ff-radius-pill);
  background: var(--ff-bg-ivory);
  color: var(--ff-primary);
  font-size: var(--ff-fs-eyebrow);
  font-weight: var(--ff-fw-semibold);
  letter-spacing: var(--ff-ls-eyebrow);
  text-transform: uppercase;
  border: 1px solid var(--ff-line);
}
.ff-chip--dark {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ff-on-dark);
  border: 1px solid var(--ff-line-dark);
}

.ff-card {
  background: var(--ff-bg-card);
  border-radius: var(--ff-radius-md);
  border: 1px solid var(--ff-line);
  transition: box-shadow var(--ff-dur) var(--ff-ease),
              transform var(--ff-dur) var(--ff-ease);
}
.ff-card:hover { box-shadow: var(--ff-shadow-card); }
.ff-card--dark {
  background: var(--ff-primary);
  color: var(--ff-on-dark);
  border-color: var(--ff-line-dark);
}

.ff-divider {
  height: 1px;
  width: 100%;
  background: var(--ff-line);
  border: 0;
}

/* Utility */
.ff-container {
  max-width: calc(var(--ff-container) + var(--ff-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
}
@media (max-width: 768px) {
  .ff-container { padding-inline: var(--ff-gutter-mobile); }
  :root { --ff-fs-display-1: 40px; --ff-fs-display-2: 32px; }
}