/* PartnerPay design tokens — source of truth. Import once, reference everywhere. */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700&family=Public+Sans:wght@400;500;600&display=swap");

:root {
  /* Core palette */
  --pp-forest: #0F2A21;      /* primary text, dark surfaces, hero */
  --pp-pine: #24503F;        /* hover on dark, secondary dark surface */
  --pp-lime: #D7F592;        /* accent + primary CTA fill (shared DNA with ajch.net) */
  --pp-lime-hover: #C6EC72;  /* CTA hover */
  --pp-paper: #F5F7F0;       /* page background */
  --pp-white: #FFFFFF;       /* cards, inputs */
  --pp-rule: #DCE3D6;        /* borders, dividers */
  --pp-moss: #5A6B61;        /* secondary text on light (5.2:1 on paper) */
  --pp-moss-light: #A9BDB2;  /* secondary text on forest (7.7:1) */

  /* Status (payout + referral states) — text / background pairs, all ≥4.5:1 */
  --pp-paid: #1F7A44;     --pp-paid-bg: #E3F4E8;
  --pp-pending: #8A5A12;  --pp-pending-bg: #FBF0D9;
  --pp-error: #B3362F;    --pp-error-bg: #FBE7E5;
  --pp-neutral: #5A6B61;  --pp-neutral-bg: #ECEFE8;

  /* Type */
  --pp-font-display: "Lexend", "Public Sans", system-ui, sans-serif;
  --pp-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pp-fs-h1: clamp(2.5rem, 6vw, 4.5rem);
  --pp-fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --pp-fs-h3: 1.25rem;
  --pp-fs-body: 1.0625rem;
  --pp-fs-small: 0.875rem;
  --pp-lh-tight: 1.05;
  --pp-lh-body: 1.6;
  --pp-tracking-display: -0.025em;

  /* Shape — radius encodes hierarchy, not one value everywhere */
  --pp-radius-pill: 999px;   /* buttons, status badges */
  --pp-radius-input: 10px;   /* inputs, small controls */
  --pp-radius-panel: 18px;   /* panels, dashboard sections */
  --pp-notch: 10px;          /* payout-stub notch radius */

  /* Spacing */
  --pp-space-1: 0.25rem; --pp-space-2: 0.5rem; --pp-space-3: 0.75rem;
  --pp-space-4: 1rem;    --pp-space-6: 1.5rem; --pp-space-8: 2rem;
  --pp-space-12: 3rem;   --pp-space-16: 4rem;  --pp-space-24: 6rem;
  --pp-container: 1160px;
  --pp-measure: 64ch;

  /* Focus */
  --pp-focus: 0 0 0 3px var(--pp-paper), 0 0 0 5px var(--pp-forest);
  --pp-focus-on-dark: 0 0 0 3px var(--pp-forest), 0 0 0 5px var(--pp-lime);
}