/* ─────────────────────────────────────────────────────────────
   PayGram Design System · Foundations
   Color + Type tokens. Import this file in any artifact built
   from the PayGram brand.
   ───────────────────────────────────────────────────────────── */

/* Fonts (Google Fonts) — keep imports outside if loading manually */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── Brand palette ──────────────────────────────────────── */
  /* Primary: PayGram Plum. Purple = trust+premium, slightly
     warmer than Stripe-blue, more grown-up than Gumroad-pink. */
  --plum-50:  #f6f3ff;
  --plum-100: #ece5ff;
  --plum-200: #d8c9ff;
  --plum-300: #bda3fb;
  --plum-400: #9d78f0;
  --plum-500: #7c4ee0;   /* primary action */
  --plum-600: #6635c8;   /* primary hover  */
  --plum-700: #5128a3;
  --plum-800: #3f1f80;
  --plum-900: #2c1659;
  --plum-950: #1a0c38;

  /* Accent: Sand (warm peach). Replaces the muddy gold of the
     legacy site — used SPARINGLY, on highlights and badges. */
  --sand-50:  #fff7ee;
  --sand-100: #ffead0;
  --sand-200: #ffd29a;
  --sand-300: #ffb466;
  --sand-400: #ff9438;
  --sand-500: #f17518;
  --sand-600: #d35a0c;
  --sand-700: #a8430a;

  /* Ink: near-black with a violet undertone for depth without
     the harshness of pure black. */
  --ink-950: #0e0a1a;
  --ink-900: #16111f;
  --ink-800: #1f1a2c;

  /* ── Neutrals (cool, slight violet cast) ────────────────── */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8f7fb;
  --neutral-100: #f1f0f6;
  --neutral-200: #e6e4ee;
  --neutral-300: #d2cfdd;
  --neutral-400: #a9a4bb;
  --neutral-500: #7d7794;
  --neutral-600: #5d5874;
  --neutral-700: #443f59;
  --neutral-800: #2c2840;
  --neutral-900: #19162a;
  --neutral-950: #0e0a1a;

  /* ── Semantic ───────────────────────────────────────────── */
  --success-50:  #e8f8ee;
  --success-500: #1f9d55;
  --success-700: #166f3d;

  --warning-50:  #fff5e0;
  --warning-500: #d68b00;
  --warning-700: #8d5b00;

  --error-50:    #fdecec;
  --error-500:   #d6324a;
  --error-700:   #8d1f30;

  --info-50:     #e8f1fe;
  --info-500:    #2f6fe0;
  --info-700:    #1d4795;

  /* ── Aliases ────────────────────────────────────────────── */
  --bg:           var(--neutral-0);
  --bg-soft:      var(--neutral-50);
  --bg-muted:     var(--neutral-100);
  --bg-inverse:   var(--ink-950);
  --fg:           var(--ink-950);
  --fg-soft:      var(--neutral-700);
  --fg-muted:     var(--neutral-500);
  --fg-on-dark:   var(--neutral-0);
  --fg-on-primary:var(--neutral-0);
  --border:       var(--neutral-200);
  --border-strong:var(--neutral-300);
  --primary:      var(--plum-500);
  --primary-hover:var(--plum-600);
  --primary-soft: var(--plum-50);
  --accent:       var(--sand-400);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (mobile-first, scales up on desktop via clamp) */
  --fs-display: clamp(40px, 7vw, 72px);
  --fs-h1:      clamp(32px, 5.4vw, 56px);
  --fs-h2:      clamp(26px, 3.6vw, 40px);
  --fs-h3:      clamp(22px, 2.6vw, 28px);
  --fs-h4:      20px;
  --fs-lead:    clamp(17px, 1.4vw, 19px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-base:   1.5;
  --lh-loose:  1.65;

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

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.08em;

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

  /* ── Radii ──────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ── Shadows (subtle, no neon, no glow stacks) ──────────── */
  --shadow-xs: 0 1px 2px rgba(15, 10, 26, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 10, 26, 0.06), 0 1px 2px rgba(15, 10, 26, 0.04);
  --shadow-md: 0 6px 20px rgba(15, 10, 26, 0.08), 0 2px 6px rgba(15, 10, 26, 0.04);
  --shadow-lg: 0 16px 40px rgba(15, 10, 26, 0.10), 0 4px 12px rgba(15, 10, 26, 0.06);
  --shadow-xl: 0 32px 64px rgba(15, 10, 26, 0.14), 0 8px 20px rgba(15, 10, 26, 0.08);
  /* Brand-tinted glow used ONCE on hero product mock */
  --shadow-plum: 0 24px 60px -12px rgba(124, 78, 224, 0.35);
  --shadow-focus: 0 0 0 3px rgba(124, 78, 224, 0.35);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ── Element defaults ─────────────────────────────────────── */
html, body { font-family: var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg); margin: 0; }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);  line-height: var(--lh-snug);  letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold);  line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
p  { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-soft); margin: 0; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-base); color: var(--fg-soft); }
small, .small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); font-weight: var(--fw-semibold); }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; }