/* =========================================================================
   FunnelCrafter Design System — design-system.css
   Canonical token file for all web pages.
   Source: funnelcrafter_brand_identity_manual_v4.docx

   Load Poppins + Inter from Google Fonts before this file:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet">
   ========================================================================= */

:root {
  /* ---------- Brand Color Tokens ---------- */
  --fc-funnel-green:      #348632;
  --fc-funnel-green-700:  #2E7D32;
  --fc-funnel-green-600:  #3D9A3A;
  --fc-funnel-green-100:  #E8F3E7;

  --fc-deep-blue:         #173047;
  --fc-deep-blue-800:     #0F2235;
  --fc-deep-blue-600:     #234868;
  --fc-deep-blue-400:     #4B6B86;

  --fc-accent-blue:       #00A0FF;
  --fc-accent-blue-700:   #0084D4;

  --fc-border-white:      #F4F4EF;
  --fc-light-gray:        #E3E3E0;
  --fc-paper:             #FAFAF7;
  --fc-white:             #FFFFFF;

  /* ---------- Neutral Scale ---------- */
  --fc-ink-900: #0F2235;
  --fc-ink-800: #173047;
  --fc-ink-700: #2A3F55;
  --fc-ink-600: #4B6B86;
  --fc-ink-500: #6F8499;
  --fc-ink-400: #9AAAB9;
  --fc-ink-300: #C7D0D9;
  --fc-ink-200: #DCE2E8;
  --fc-ink-100: #ECEFF2;
  --fc-ink-50:  #F6F7F9;

  /* ---------- Semantic Colors ---------- */
  --fc-success:  #348632;
  --fc-warning:  #E8A93C;
  --fc-danger:   #D14343;
  --fc-info:     #00A0FF;

  /* ---------- Semantic Roles ---------- */
  --fc-bg:           var(--fc-paper);
  --fc-bg-elevated:  var(--fc-white);
  --fc-bg-sunken:    var(--fc-ink-50);
  --fc-bg-dark:      var(--fc-deep-blue);

  --fc-fg-1:         var(--fc-deep-blue);
  --fc-fg-2:         var(--fc-ink-700);
  --fc-fg-3:         var(--fc-ink-500);
  --fc-fg-4:         var(--fc-ink-400);
  --fc-fg-on-dark:   var(--fc-border-white);
  --fc-fg-on-dark-2: #B6C4D0;
  --fc-fg-on-brand:  var(--fc-white);

  --fc-border-1:      var(--fc-ink-200);
  --fc-border-2:      var(--fc-ink-300);
  --fc-border-strong: var(--fc-deep-blue);
  --fc-border-brand:  var(--fc-funnel-green);

  --fc-link:       var(--fc-funnel-green);
  --fc-link-hover: var(--fc-funnel-green-700);

  /* ---------- Typography ---------- */
  --fc-font-display: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-font-body:    "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type Scale ---------- */
  --fc-text-xs:   0.75rem;
  --fc-text-sm:   0.875rem;
  --fc-text-base: 1rem;
  --fc-text-md:   1.125rem;
  --fc-text-lg:   1.375rem;
  --fc-text-xl:   1.75rem;
  --fc-text-2xl:  2.25rem;
  --fc-text-3xl:  2.875rem;
  --fc-text-4xl:  3.625rem;

  /* ---------- Weights ---------- */
  --fc-fw-regular: 400;
  --fc-fw-medium:  500;
  --fc-fw-semi:    600;
  --fc-fw-bold:    700;
  --fc-fw-extra:   800;

  /* ---------- Line Height ---------- */
  --fc-lh-tight:  1.05;
  --fc-lh-snug:   1.2;
  --fc-lh-normal: 1.5;
  --fc-lh-loose:  1.65;

  /* ---------- Letter Spacing ---------- */
  --fc-track-tight:  -0.02em;
  --fc-track-snug:   -0.01em;
  --fc-track-normal: 0;
  --fc-track-caps:   0.08em;

  /* ---------- Spacing Scale (4px base) ---------- */
  --fc-space-1:  4px;
  --fc-space-2:  8px;
  --fc-space-3:  12px;
  --fc-space-4:  16px;
  --fc-space-5:  24px;
  --fc-space-6:  32px;
  --fc-space-7:  48px;
  --fc-space-8:  64px;
  --fc-space-9:  96px;

  /* ---------- Radii ---------- */
  --fc-radius-xs:   4px;
  --fc-radius-sm:   6px;
  --fc-radius-md:   10px;
  --fc-radius-lg:   14px;
  --fc-radius-xl:   20px;
  --fc-radius-pill: 999px;

  /* ---------- Shadows (deep-blue tinted) ---------- */
  --fc-shadow-xs:    0 1px 2px rgba(15, 34, 53, 0.06);
  --fc-shadow-sm:    0 2px 4px rgba(15, 34, 53, 0.06), 0 1px 2px rgba(15, 34, 53, 0.04);
  --fc-shadow-md:    0 4px 12px rgba(15, 34, 53, 0.08), 0 2px 4px rgba(15, 34, 53, 0.04);
  --fc-shadow-lg:    0 12px 28px rgba(15, 34, 53, 0.10), 0 4px 8px rgba(15, 34, 53, 0.05);
  --fc-shadow-xl:    0 24px 48px rgba(15, 34, 53, 0.14), 0 8px 16px rgba(15, 34, 53, 0.06);
  --fc-shadow-brand: 0 6px 14px rgba(52, 134, 50, 0.28);

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

  /* ---------- Layout ---------- */
  --fc-container:    1200px;
  --fc-container-sm: 880px;
  --fc-gutter:       24px;
}

/* =========================================================================
   Utility classes
   ========================================================================= */

/* Eyebrow label */
.fc-eyebrow {
  font-family: var(--fc-font-display);
  font-weight: var(--fc-fw-semi);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-funnel-green);
}

/* Standard card */
.fc-card {
  background: var(--fc-white);
  border: 1px solid var(--fc-ink-200);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-sm);
}

/* Primary button */
.fc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fc-font-display);
  font-weight: var(--fc-fw-semi);
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 11px 22px;
  border-radius: var(--fc-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--fc-dur-fast) var(--fc-ease-out),
              box-shadow var(--fc-dur-base) var(--fc-ease-out),
              transform var(--fc-dur-fast) var(--fc-ease-out);
  text-decoration: none;
}
.fc-btn--primary {
  background: var(--fc-funnel-green);
  color: #fff;
  box-shadow: var(--fc-shadow-brand);
}
.fc-btn--primary:hover { background: var(--fc-funnel-green-700); }
.fc-btn--primary:active { transform: translateY(1px); }

.fc-btn--secondary {
  background: var(--fc-deep-blue);
  color: #fff;
}
.fc-btn--secondary:hover { background: var(--fc-deep-blue-800); }

.fc-btn--outline {
  background: transparent;
  color: var(--fc-deep-blue);
  border-color: var(--fc-ink-300);
}
.fc-btn--outline:hover { border-color: var(--fc-deep-blue); }

/* Standard input */
.fc-input {
  font-family: var(--fc-font-body);
  font-size: 14px;
  color: var(--fc-fg-1);
  background: var(--fc-white);
  border: 1px solid var(--fc-ink-300);
  border-radius: var(--fc-radius-md);
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color var(--fc-dur-fast) var(--fc-ease-out),
              box-shadow var(--fc-dur-fast) var(--fc-ease-out);
}
.fc-input:focus {
  border-color: var(--fc-funnel-green);
  box-shadow: 0 0 0 3px rgba(52, 134, 50, 0.18);
}
.fc-input::placeholder { color: var(--fc-ink-400); }

/* Badge / pill */
.fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fc-font-display);
  font-weight: var(--fc-fw-semi);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--fc-radius-pill);
}
.fc-badge--brand   { background: var(--fc-funnel-green-100); color: var(--fc-funnel-green-700); }
.fc-badge--solid   { background: var(--fc-funnel-green); color: #fff; }
.fc-badge--neutral { background: var(--fc-ink-100); color: var(--fc-fg-1); }
.fc-badge--blue    { background: rgba(0,160,255,0.10); color: #0073B8; }