/* MannyPay Design System v3 — source: Manny Pay.fig */
:root {
  /* Primitive — color */
  --mp-white: #ffffff;
  --mp-ink-950: #071630;
  --mp-ink-700: #343b47;
  --mp-ink-500: #676d77;
  --mp-blue-700: #0a4fe1;
  --mp-blue-600: #1768ef;
  --mp-blue-100: #dbe6fd;
  --mp-blue-50: #edf2fd;
  --mp-red-600: #d91e36;
  --mp-yellow-500: #ffd431;
  --mp-yellow-100: #fff4b3;
  --mp-border: #dbe1eb;

  /* Primitive — typography */
  --mp-font-sans: "Manrope", "Avenir Next", Arial, sans-serif;
  --mp-text-10: 0.625rem;
  --mp-text-11: 0.6875rem;
  --mp-text-12: 0.75rem;
  --mp-text-13: 0.8125rem;
  --mp-text-14: 0.875rem;
  --mp-text-16: 1rem;
  --mp-text-18: 1.125rem;
  --mp-text-20: 1.25rem;
  --mp-text-24: 1.5rem;
  --mp-text-38: 2.375rem;
  --mp-text-52: 3.25rem;
  --mp-text-60: 3.75rem;
  --mp-text-64: 4rem;

  /* Primitive — 4/8pt spacing */
  --mp-space-1: 0.25rem;
  --mp-space-2: 0.5rem;
  --mp-space-3: 0.75rem;
  --mp-space-4: 1rem;
  --mp-space-5: 1.25rem;
  --mp-space-6: 1.5rem;
  --mp-space-8: 2rem;
  --mp-space-10: 2.5rem;
  --mp-space-12: 3rem;
  --mp-space-14: 3.5rem;
  --mp-space-16: 4rem;
  --mp-space-20: 5rem;
  --mp-space-24: 6rem;

  /* Primitive — shape and motion */
  --mp-radius-xs: 0.1875rem;
  --mp-radius-sm: 0.3125rem;
  --mp-radius-md: 0.5625rem;
  --mp-radius-pill: 999px;
  --mp-shadow-card: 0 0.5rem 1.25rem rgb(31 63 120 / 0.07);
  --mp-duration-fast: 160ms;
  --mp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Semantic */
  --color-canvas: var(--mp-white);
  --color-surface: var(--mp-blue-50);
  --color-text: var(--mp-ink-950);
  --color-text-subtle: var(--mp-ink-700);
  --color-text-muted: var(--mp-ink-500);
  --color-primary: var(--mp-blue-600);
  --color-primary-hover: var(--mp-blue-700);
  --color-primary-soft: var(--mp-blue-50);
  --color-highlight: var(--mp-yellow-500);
  --color-brand-accent: var(--mp-red-600);
  --color-border: var(--mp-border);
  --font-display: var(--mp-font-sans);
  --font-body: var(--mp-font-sans);
  --container-width: 77.5rem;
  --container-gutter: var(--mp-space-8);
  --section-space: var(--mp-space-24);

  /* Component */
  --button-height: 2.75rem;
  --button-padding-x: var(--mp-space-6);
  --button-radius: var(--mp-radius-pill);
  --button-primary-bg: var(--color-primary);
  --button-primary-text: var(--mp-white);
  --card-bg: var(--mp-white);
  --card-border: var(--color-border);
  --card-radius: var(--mp-radius-sm);
  --card-padding: var(--mp-space-6);
  --field-height: 2.75rem;
  --field-radius: var(--mp-radius-sm);
  --focus-ring: 0 0 0 3px rgb(23 104 239 / 0.28);
}

@media (max-width: 767px) {
  :root { --container-gutter: var(--mp-space-4); --section-space: var(--mp-space-20); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --mp-duration-fast: 0ms; }
}