/* ==========================================================================
   Fulfill'd — Design Token System
   
   Single source of truth for the brand's visual language.
   Ported from fulfilld_landing.css and extended per buildout spec.
   ========================================================================== */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  --fd-green-50:  #ECFDF5;
  --fd-green-100: #D1FAE5;
  --fd-green-200: #A7F3D0;
  --fd-green-300: #6EE7B7;
  --fd-green-400: #34D399;
  --fd-green-500: #10B981;   /* Accent / Emerald */
  --fd-green-600: #059669;
  --fd-green-700: #047857;
  --fd-green-800: #1B7A43;   /* Primary / Forest Green */
  --fd-green-850: #22A05B;   /* Light primary */
  --fd-green-900: #145C33;   /* Dark primary */
  --fd-green-950: #064E3B;

  /* ── Neutrals ─────────────────────────────────────────────────────────── */
  --fd-gray-50:   #F8FAF9;   /* Page background */
  --fd-gray-100:  #F3F4F6;
  --fd-gray-200:  #E5E7EB;
  --fd-gray-300:  #D1D5DB;
  --fd-gray-400:  #9CA3AF;
  --fd-gray-500:  #5E716A;   /* Muted text */
  --fd-gray-600:  #4B5563;
  --fd-gray-700:  #374151;
  --fd-gray-800:  #1F2937;
  --fd-gray-900:  #0F1A14;   /* Primary text */
  --fd-gray-950:  #030712;

  /* ── Accent & Status ──────────────────────────────────────────────────── */
  --fd-blue-500:  #3B82F6;
  --fd-amber-500: #F59E0B;
  --fd-amber-600: #D97706;
  --fd-red-500:   #EF4444;
  --fd-red-600:   #DC3545;

  /* ── Gradients ────────────────────────────────────────────────────────── */
  --fd-gradient-brand:  linear-gradient(135deg, #1B7A43 0%, #22A05B 100%);
  --fd-gradient-hero:   linear-gradient(180deg, #F8FAF9 0%, #EEF5F0 100%);
  --fd-gradient-cta:    linear-gradient(135deg, #1B7A43 0%, #145C33 50%, #0D4025 100%);
  --fd-gradient-text:   linear-gradient(135deg, #1B7A43 0%, #10B981 50%, #22A05B 100%);
  --fd-gradient-card:   linear-gradient(135deg, #1B7A43 0%, #22A05B 100%);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --fd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fd-font-size-xs:    0.75rem;    /* 12px */
  --fd-font-size-sm:    0.8125rem;  /* 13px */
  --fd-font-size-base:  0.875rem;   /* 14px */
  --fd-font-size-md:    0.9375rem;  /* 15px */
  --fd-font-size-lg:    1rem;       /* 16px */
  --fd-font-size-xl:    1.125rem;   /* 18px */
  --fd-font-size-2xl:   1.375rem;   /* 22px */
  --fd-font-size-3xl:   1.5rem;     /* 24px */
  --fd-font-size-4xl:   1.75rem;    /* 28px */
  --fd-font-size-5xl:   2.625rem;   /* 42px */
  --fd-font-size-6xl:   3.5rem;     /* 56px */

  --fd-leading-tight:   1.1;
  --fd-leading-snug:    1.2;
  --fd-leading-normal:  1.6;
  --fd-leading-relaxed: 1.7;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --fd-space-1:   0.25rem;   /* 4px  */
  --fd-space-2:   0.5rem;    /* 8px  */
  --fd-space-3:   0.75rem;   /* 12px */
  --fd-space-4:   1rem;      /* 16px */
  --fd-space-5:   1.25rem;   /* 20px */
  --fd-space-6:   1.5rem;    /* 24px */
  --fd-space-8:   2rem;      /* 32px */
  --fd-space-10:  2.5rem;    /* 40px */
  --fd-space-12:  3rem;      /* 48px */
  --fd-space-16:  4rem;      /* 64px */
  --fd-space-20:  5rem;      /* 80px */
  --fd-space-24:  6rem;      /* 96px */
  --fd-space-25:  6.25rem;   /* 100px */

  /* ── Borders & Radii ──────────────────────────────────────────────────── */
  --fd-radius-sm:    0.375rem;  /* 6px  */
  --fd-radius-md:    0.5rem;    /* 8px  */
  --fd-radius-lg:    0.75rem;   /* 12px */
  --fd-radius-xl:    0.875rem;  /* 14px */
  --fd-radius-2xl:   1.25rem;   /* 20px */
  --fd-radius-3xl:   1.5rem;    /* 24px */
  --fd-radius-4xl:   2rem;      /* 32px */
  --fd-radius-full:  9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --fd-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --fd-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --fd-shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --fd-shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --fd-shadow-card:  0 20px 60px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --fd-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.08);
  --fd-shadow-btn:   0 4px 14px rgba(27, 122, 67, 0.3);
  --fd-shadow-btn-hover: 0 8px 24px rgba(27, 122, 67, 0.4);
  --fd-shadow-glow:  0 0 40px rgba(16, 185, 129, 0.3);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --fd-transition-fast:   150ms ease;
  --fd-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --fd-transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
  --fd-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Stack ────────────────────────────────────────────────────── */
  --fd-z-base:    1;
  --fd-z-nav:     100;
  --fd-z-overlay: 200;
  --fd-z-modal:   300;

  /* ── Max Width ────────────────────────────────────────────────────────── */
  --fd-max-width: 1200px;
}