/* =========================================================================
   PUMP TEAM — DESIGN TOKENS v2
   Stripe-safe public brand system
   ========================================================================= */

/* -------- Font stack
   Default (open-source, in use): General Sans (display) + Inter Tight (body)
   + JetBrains Mono (tabular/numeric)
   Swap to PP Neue Montreal + Söhne when commercial licenses are acquired —
   find the block marked [LICENSED FONT SWAP] below and uncomment.
   ------------------------------------------------------------------------- */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=satoshi@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== TYPOGRAPHY =================================================== */
  --font-display: "General Sans", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* [LICENSED FONT SWAP] — uncomment when commercial licenses are in place
  --font-display: "PP Neue Montreal", "General Sans", system-ui, sans-serif;
  --font-body:    "Söhne", "Inter Tight", system-ui, sans-serif;
  */

  /* Fluid type scale — desktop-first, clamps for mobile */
  --text-hero:     clamp(3.25rem, 7.5vw, 6.75rem);  /* h1 hero */
  --text-display:  clamp(2.25rem, 4.8vw, 4.25rem);  /* section h2 */
  --text-h2:       clamp(1.625rem, 2.8vw, 2.5rem);
  --text-h3:       1.5rem;
  --text-h4:       1.25rem;
  --text-lead:     1.125rem;
  --text-body:     1rem;
  --text-small:    0.875rem;
  --text-caption:  0.75rem;
  --text-micro:    0.6875rem;

  /* Type behavior */
  --tracking-display: -0.035em;
  --tracking-h2:      -0.025em;
  --tracking-body:    -0.005em;
  --tracking-mono:    -0.01em;
  --tracking-eyebrow: 0.14em;

  --leading-display: 0.96;
  --leading-h2:      1.05;
  --leading-lead:    1.45;
  --leading-body:    1.55;

  /* ===== COLOR — DARK DEFAULT ========================================= */
  /* Surfaces (warm near-black) */
  --bg-primary:    oklch(0.13 0.005 90);   /* page */
  --bg-secondary:  oklch(0.175 0.007 90);  /* cards */
  --bg-tertiary:   oklch(0.235 0.009 90);  /* hover, raised */
  --bg-inset:      oklch(0.105 0.005 90);  /* input wells */

  /* Text */
  --text-primary:   oklch(0.97 0.005 90);
  --text-secondary: oklch(0.78 0.008 90);
  --text-tertiary:  oklch(0.58 0.01 90);
  --text-disabled:  oklch(0.42 0.008 90);

  /* Accent — Pump green */
  --accent-primary: oklch(0.72 0.16 145);
  --accent-hover:   oklch(0.78 0.18 145);
  --accent-press:   oklch(0.66 0.15 145);
  --accent-subtle:  oklch(0.32 0.08 145);   /* badge bg */
  --accent-ghost:   oklch(0.72 0.16 145 / 0.12);
  --accent-ink:     oklch(0.15 0.03 145);   /* text on green */

  /* Borders */
  --border-subtle: oklch(0.28 0.008 90);
  --border-strong: oklch(0.40 0.01 90);
  --border-accent: oklch(0.72 0.16 145 / 0.45);

  /* Semantic */
  --success: oklch(0.72 0.15 150);
  --warning: oklch(0.78 0.15 78);
  --danger:  oklch(0.64 0.20 25);
  --info:    oklch(0.72 0.12 230);

  /* ===== SPACING ====================================================== */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --space-5xl: 12rem;

  /* ===== RADII ======================================================== */
  --radius-xs:  0.25rem;
  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 999px;

  /* ===== SHADOWS ====================================================== */
  --shadow-xs:   0 1px 2px oklch(0 0 0 / 0.12);
  --shadow-sm:   0 2px 6px oklch(0 0 0 / 0.16);
  --shadow-md:   0 6px 18px oklch(0 0 0 / 0.22);
  --shadow-lg:   0 18px 48px oklch(0 0 0 / 0.32);
  --shadow-xl:   0 32px 80px oklch(0 0 0 / 0.44);
  --shadow-glow: 0 0 48px oklch(0.72 0.16 145 / 0.28);
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.04);

  /* ===== MOTION ======================================================= */
  --dur-xs: 120ms;
  --dur-sm: 200ms;
  --dur-md: 320ms;
  --dur-lg: 520ms;
  --dur-xl: 800ms;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== LAYOUT ======================================================= */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1360px;
  --container-hero: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ===== DENSITY (modifier) =========================================== */
  --density-y: 1;  /* multiplier for vertical rhythm */
}

/* -------- LIGHT MODE (opt-in via [data-theme="light"]) ---------------- */
[data-theme="light"] {
  --bg-primary:    oklch(0.98 0.004 90);
  --bg-secondary:  oklch(0.955 0.006 90);
  --bg-tertiary:   oklch(0.92 0.008 90);
  --bg-inset:      oklch(0.99 0.003 90);

  --text-primary:   oklch(0.20 0.008 90);
  --text-secondary: oklch(0.42 0.01 90);
  --text-tertiary:  oklch(0.58 0.012 90);
  --text-disabled:  oklch(0.72 0.008 90);

  --accent-primary: oklch(0.58 0.17 145);
  --accent-hover:   oklch(0.52 0.18 145);
  --accent-press:   oklch(0.48 0.17 145);
  --accent-subtle:  oklch(0.88 0.07 145);
  --accent-ghost:   oklch(0.58 0.17 145 / 0.10);
  --accent-ink:     oklch(0.98 0.005 145);

  --border-subtle: oklch(0.88 0.006 90);
  --border-strong: oklch(0.72 0.008 90);
  --border-accent: oklch(0.58 0.17 145 / 0.40);

  --shadow-xs:   0 1px 2px oklch(0.20 0.01 90 / 0.06);
  --shadow-sm:   0 2px 6px oklch(0.20 0.01 90 / 0.08);
  --shadow-md:   0 6px 18px oklch(0.20 0.01 90 / 0.10);
  --shadow-lg:   0 18px 48px oklch(0.20 0.01 90 / 0.14);
  --shadow-xl:   0 32px 80px oklch(0.20 0.01 90 / 0.18);
}

/* -------- DENSITY MODIFIER ------------------------------------------- */
[data-density="compact"]    { --density-y: 0.78; }
[data-density="comfortable"]{ --density-y: 1;    }

/* -------- TYPE PAIRING SWITCH ----------------------------------------
   Default = B (General Sans + Inter Tight).
   A = Inter Tight display + Inter Tight body (more neutral/tech)
   C = serif hero option via "Fraktion" or fallback to bold General Sans italic
   -------------------------------------------------------------------- */
[data-type="A"] {
  --font-display: "Inter Tight", system-ui, sans-serif;
  --tracking-display: -0.03em;
}
[data-type="C"] {
  --font-display: "Satoshi", "General Sans", system-ui, sans-serif;
  --tracking-display: -0.04em;
}

/* =========================================================================
   GLOBAL RESET + BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "cv05";
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--accent-primary); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* =========================================================================
   UTILITIES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-wide { max-width: var(--container-2xl); }
.container-narrow { max-width: var(--container-md); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}

.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

.hairline {
  height: 1px;
  background: var(--border-subtle);
  border: none;
  margin: 0;
}