:root {
  /* Colors — pulled from the Figma app design (node 405:819 and siblings), not invented:
     #63a950 accent green, #464d44 body text, #a3a7a2 muted text, #e7e7e7 separators/borders,
     white surfaces throughout. --color-accent repurposes the contribution-badge gold
     (#e9c968 / #86651f) as the only secondary brand color Figma actually uses. */
  --color-primary: #63A950;
  --color-primary-dark: #4A8339;
  --color-primary-light: #7DBD68;
  --color-primary-rgb: 99, 169, 80;
  --color-accent: #E9C968;
  --color-accent-dark: #86651F;
  --color-accent-light: #F3DFA0;
  --color-accent-rgb: 233, 201, 104;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F6F4;
  --color-surface: #FFFFFF;
  --color-surface-rgb: 255, 255, 255;
  --color-text: #464D44;
  --color-text-muted: #A3A7A2;
  --color-border: #E7E7E7;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Radius / shadow */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(70, 77, 68, 0.06);
  --shadow-md: 0 10px 26px rgba(70, 77, 68, 0.09), 0 2px 6px rgba(70, 77, 68, 0.06);
  --shadow-lg: 0 22px 50px rgba(70, 77, 68, 0.16), 0 4px 12px rgba(70, 77, 68, 0.08);
  --shadow-glow-primary: 0 10px 30px rgba(var(--color-primary-rgb), 0.30);
  --shadow-glow-accent: 0 10px 30px rgba(var(--color-accent-rgb), 0.30);

  /* Motion */
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.18s var(--ease-fluid);
  --transition-base: 0.35s var(--ease-fluid);
  --transition-spring: 0.5s var(--ease-spring);

  /* Typography — Outfit everywhere (mobile app's font, no exceptions: not just post cards). */
  --font-family-base: "Outfit", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Outfit", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}