/* ══════════════════════════════════════════════
   DESIGN TOKENS — FairPlane Landing Pages
   Based on FairPlane Brand Identity
   ══════════════════════════════════════════════ */

:root {
  /* ── Primary Palette ── */
  --fp-primary:          #e32055;
  --fp-primary-hover:    #c91a4a;
  --fp-primary-light:    rgba(227, 32, 85, 0.08);
  --fp-primary-glow:     rgba(227, 32, 85, 0.25);

  /* ── Secondary Palette ── */
  --fp-secondary:        #5464ff;
  --fp-secondary-hover:  #3d4de6;
  --fp-secondary-light:  rgba(84, 100, 255, 0.08);

  /* ── Neutral Palette ── */
  --fp-dark:             #2c3342;
  --fp-dark-soft:        #3d4556;
  --fp-gray-700:         #4a5568;
  --fp-gray-500:         #718096;
  --fp-gray-400:         #a0aec0;
  --fp-gray-300:         #dadada;
  --fp-gray-200:         #e2e8f0;
  --fp-gray-100:         #f1f5f9;
  --fp-light:            #fafafa;
  --fp-white:            #ffffff;

  /* ── Semantic Colors ── */
  --fp-success:          #16a34a;
  --fp-success-light:    rgba(22, 163, 74, 0.08);
  --fp-warning:          #f59e0b;
  --fp-error:            #e32055;
  --fp-info:             #5464ff;

  /* ── Trustpilot Green ── */
  --fp-trustpilot:       #00b67a;

  /* ── Typography ── */
  --fp-font:             'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fp-font-size-xs:     0.75rem;    /* 12px */
  --fp-font-size-sm:     0.875rem;   /* 14px */
  --fp-font-size-base:   1rem;       /* 16px */
  --fp-font-size-lg:     1.125rem;   /* 18px */
  --fp-font-size-xl:     1.25rem;    /* 20px */
  --fp-font-size-2xl:    1.5rem;     /* 24px */
  --fp-font-size-3xl:    1.875rem;   /* 30px */
  --fp-font-size-4xl:    2.25rem;    /* 36px */
  --fp-font-size-5xl:    3rem;       /* 48px */
  --fp-font-size-6xl:    3.75rem;    /* 60px */

  /* ── Spacing ── */
  --fp-space-xs:         0.25rem;    /* 4px */
  --fp-space-sm:         0.5rem;     /* 8px */
  --fp-space-md:         1rem;       /* 16px */
  --fp-space-lg:         1.5rem;     /* 24px */
  --fp-space-xl:         2rem;       /* 32px */
  --fp-space-2xl:        3rem;       /* 48px */
  --fp-space-3xl:        4rem;       /* 64px */

  /* ── Border Radius ── */
  --fp-radius-sm:        6px;
  --fp-radius:           12px;
  --fp-radius-lg:        16px;
  --fp-radius-xl:        24px;
  --fp-radius-full:      9999px;

  /* ── Shadows ── */
  --fp-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06);
  --fp-shadow:           0 4px 15px rgba(0, 0, 0, 0.08);
  --fp-shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.12);
  --fp-shadow-xl:        0 20px 60px rgba(0, 0, 0, 0.15);
  --fp-shadow-glow:      0 0 40px var(--fp-primary-glow);

  /* ── Transitions ── */
  --fp-transition:       all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --fp-transition-fast:  all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --fp-transition-slow:  all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Scale ── */
  --fp-z-base:           1;
  --fp-z-dropdown:       100;
  --fp-z-header:         200;
  --fp-z-modal:          300;
  --fp-z-toast:          400;

  /* ── Layout ── */
  --fp-max-width:        1200px;
  --fp-content-width:    680px;
}