/* ==========================================================================
   Ping Payments — Design Tokens
   Single source of truth for colour, type, spacing, radius, shadow & motion.
   Derived from the client design screenshots (Slide1–Slide10).
   ========================================================================== */

:root {
  /* ---- Brand colour ---------------------------------------------------- */
  --pp-blue: #2563eb;          /* primary action / links                    */
  --pp-blue-hover: #1e4fd0;
  --pp-blue-dark: #0a1f44;     /* dark navy banner background                */
  --pp-blue-ink: #0a2540;      /* headings                                  */
  --pp-blue-50: #eef3ff;       /* tinted surfaces                           */
  --pp-blue-100: #e3ecff;
  --pp-green: #22c55e;         /* success / checkmarks                      */
  --pp-green-600: #16a34a;
  --pp-mint: #eaf3ef;          /* soft mint panel (Slide8)                  */

  /* ---- Neutrals -------------------------------------------------------- */
  --pp-white: #ffffff;
  --pp-ink: #0a2540;           /* default text on light                     */
  --pp-muted: #5b6b82;         /* secondary text                            */
  --pp-line: #e8eef7;          /* card borders / dividers                   */
  --pp-surface: #f7f9ff;       /* page base                                 */

  /* ---- Gradients ------------------------------------------------------- */
  --pp-grad-page: linear-gradient(180deg, #f5f8ff 0%, #eef3ff 100%);
  --pp-grad-hero: radial-gradient(120% 120% at 80% 0%, #eef3ff 0%, #ffffff 55%);

  /* ---- Typography ------------------------------------------------------ */
  /* Body: Inter. Headings: Poppins (placeholder geometric — confirm w/ brand kit) */
  --pp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pp-font-head: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --pp-fs-eyebrow: 0.8125rem;  /* 13px, uppercase label                     */
  --pp-fs-small: 0.875rem;     /* 14px                                      */
  --pp-fs-body: 1rem;          /* 16px                                      */
  --pp-fs-lead: 1.125rem;      /* 18px intro paragraphs                     */
  --pp-fs-h4: 1.25rem;
  --pp-fs-h3: 1.5rem;
  --pp-fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --pp-fs-h1: clamp(2.25rem, 1.4rem + 3.8vw, 3.5rem);

  --pp-lh-tight: 1.1;
  --pp-lh-snug: 1.25;
  --pp-lh-body: 1.6;

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

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --pp-sp-1: 0.25rem;
  --pp-sp-2: 0.5rem;
  --pp-sp-3: 0.75rem;
  --pp-sp-4: 1rem;
  --pp-sp-5: 1.5rem;
  --pp-sp-6: 2rem;
  --pp-sp-7: 3rem;
  --pp-sp-8: 4rem;
  --pp-sp-9: 6rem;

  /* ---- Layout ---------------------------------------------------------- */
  --pp-container: 1240px;
  --pp-container-wide: 1440px;
  --pp-container-narrow: 880px;
  --pp-gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --pp-header-h: 80px;

  /* ---- Radius ---------------------------------------------------------- */
  --pp-radius-sm: 10px;
  --pp-radius: 16px;
  --pp-radius-lg: 20px;
  --pp-radius-xl: 28px;
  --pp-radius-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --pp-shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.05);
  --pp-shadow: 0 8px 24px rgba(10, 37, 64, 0.06);
  --pp-shadow-md: 0 14px 40px rgba(10, 37, 64, 0.10);
  --pp-shadow-lg: 0 24px 60px rgba(10, 37, 64, 0.14);
  --pp-ring: 0 0 0 4px rgba(37, 99, 235, 0.18);

  /* ---- Motion ---------------------------------------------------------- */
  --pp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pp-dur-fast: 0.18s;
  --pp-dur: 0.4s;
  --pp-dur-slow: 0.7s;

  /* ---- Z-index --------------------------------------------------------- */
  --pp-z-header: 100;
  --pp-z-overlay: 200;
}