/* ─────────────────────────────────────────────────────────────────
   Swapin Design System — Tokens
   Source: Figma file "Swapin_webpage.fig"
   ───────────────────────────────────────────────────────────────── */

/* Inter from Google Fonts; Poppins served locally */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&display=swap");

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("fonts/Poppins-Thin.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 100; font-display: swap;
  src: url("fonts/Poppins-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("fonts/Poppins-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 200; font-display: swap;
  src: url("fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("fonts/Poppins-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/Poppins-Italic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/Poppins-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/Poppins-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/Poppins-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/Poppins-Black.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap;
  src: url("fonts/Poppins-BlackItalic.ttf") format("truetype"); }

:root {
  /* ── Brand · Swapin ─────────────────────────────────────────── */
  /* Deep, almost-black indigo used for hero backgrounds + body text */
  --swapin-purple-900: rgb(28, 6, 45);     /* near-black indigo */
  --swapin-purple-800: rgb(37, 5, 77);     /* dark plum */
  --swapin-purple-700: rgb(56, 6, 130);    /* PRIMARY deep purple */
  --swapin-purple-600: rgb(69, 16, 138);   /* deep purple alt */
  --swapin-purple-500: rgb(95, 39, 189);
  --swapin-purple-400: rgb(124, 29, 201);  /* vibrant purple accent */
  --swapin-purple-300: rgb(137, 105, 195);
  --swapin-purple-200: rgb(159, 121, 184);
  --swapin-purple-100: rgb(209, 180, 227);
  --swapin-purple-050: rgb(230, 198, 250);

  /* Primary CTA / link blue */
  --swapin-cyan-500: rgb(52, 196, 249);    /* PRIMARY button color */
  --swapin-cyan-600: rgb(76, 155, 232);    /* link / hover */
  --swapin-cyan-400: rgb(42, 246, 255);    /* electric cyan (iGaming overlap) */

  /* SwapinCollect / sub-product violet */
  --swapin-violet: rgb(98, 77, 227);

  /* Warm accents (illustrations, badges) */
  --swapin-yellow: rgb(253, 214, 91);
  --swapin-yellow-soft: rgb(254, 236, 168);
  --swapin-peach: rgb(255, 169, 140);

  /* Neutrals */
  --neutral-000: rgb(255, 255, 255);
  --neutral-050: rgb(247, 247, 250);
  --neutral-100: rgb(238, 238, 244);
  --neutral-200: rgb(228, 228, 234);
  --neutral-300: rgb(207, 207, 207);       /* card / faq border */
  --neutral-500: rgb(140, 140, 150);
  --neutral-700: rgb(60, 60, 65);
  --neutral-900: rgb(34, 34, 34);          /* body text */
  --black: rgb(0, 0, 0);

  /* ── Semantic ────────────────────────────────────────────────── */
  --fg:           var(--neutral-900);
  --fg-muted:     rgba(34, 34, 34, 0.7);
  --fg-subtle:    rgba(34, 34, 34, 0.55);
  --fg-on-dark:   var(--neutral-000);
  --bg:           var(--neutral-000);
  --bg-dark:      var(--swapin-purple-700);
  --bg-surface:   var(--neutral-050);
  --border:       var(--neutral-300);
  --primary:      var(--swapin-cyan-500);
  --primary-fg:   var(--neutral-000);
  --accent:       var(--swapin-purple-700);
  --link:         var(--swapin-cyan-600);

  /* ── Type ───────────────────────────────────────────────────── */
  --font-sans:    "Poppins", system-ui, -apple-system, sans-serif;
  --font-display: "Poppins", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes follow Figma usage (top sizes: 14, 16, 18, 24, 30, 36, 40, 42, 48) */
  --fs-12: 12px;
  --fs-14: 14px;   /* small body / captions */
  --fs-16: 16px;   /* body */
  --fs-18: 18px;   /* lead / FAQ heading */
  --fs-20: 20px;
  --fs-24: 24px;   /* h4 / quote */
  --fs-30: 30px;   /* h3 */
  --fs-36: 36px;   /* h2 */
  --fs-42: 42px;   /* h1 (Swapin hero) */
  --fs-48: 48px;   /* big section header */
  --fs-56: 56px;
  --fs-72: 72px;

  /* ── Spacing ────────────────────────────────────────────────── */
  --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-sm: 4px;
  --r-md: 7px;    /* primary buttons & cards (Figma standard) */
  --r-lg: 12px;   /* FAQ rows & content cards */
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── Shadow / elevation ─────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(28, 6, 45, 0.06);
  --shadow-2: 0 4px 12px rgba(28, 6, 45, 0.08);
  --shadow-3: 0 12px 32px rgba(28, 6, 45, 0.12);
  --shadow-glow: 0 0 0 6px rgba(52, 196, 249, 0.18);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ── Gradients used in the brand ────────────────────────────── */
  --grad-purple-hero:
    linear-gradient(135deg, rgb(89, 52, 191) 0%, rgb(51, 8, 116) 100%);
  --grad-purple-deep:
    linear-gradient(180deg, rgb(56, 6, 130) 0%, rgb(28, 6, 45) 100%);
  --grad-cyan-glow:
    radial-gradient(60% 60% at 50% 50%, rgba(42,246,255,0.45), transparent 70%);
}

/* ── Semantic typography ─────────────────────────────────────── */
.swapin-h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-42);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.swapin-h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-36);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.swapin-h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-30);
  line-height: 1.25;
  color: var(--fg);
}
.swapin-h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: 1.3;
  color: var(--fg);
}
.swapin-eyebrow, .eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--swapin-cyan-500);
}
.swapin-lead, .lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-18);
  line-height: 1.6;
  color: var(--fg-muted);
}
.swapin-body, p, body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg);
}
.swapin-small {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.swapin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 22px;
  height: 62px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: 1;
  color: var(--primary-fg);
  background: var(--swapin-cyan-500);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.swapin-btn:hover  { filter: brightness(1.08); box-shadow: var(--shadow-glow); }
.swapin-btn:active { transform: translateY(1px); filter: brightness(0.95); }

.swapin-btn--ghost {
  background: transparent;
  color: var(--neutral-000);
  border: 1px solid rgba(255,255,255,0.4);
}
.swapin-btn--outline {
  background: transparent;
  color: var(--swapin-purple-700);
  border: 1px solid var(--swapin-purple-700);
}
.swapin-btn--sm { height: 43px; padding: 0 18px; font-size: var(--fs-14); }