:root {
  --font-display: "Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;

  --c-royal: #3a47d5;
  --c-violet: #7a3fe0;
  --c-lavender: #c6b6ff;
  --c-pink: #ff7ccf;
  --c-cyan: #62e8ff;
  --c-gold: #ffd66e;
  --c-gold-deep: #f0a830;
  --c-white: #fffaff;
  --c-ink: #2b1a5e;

  --sky-1: #2a2890;
  --sky-2: #5739c9;
  --sky-3: #9d4fd8;
  --sky-4: #f08bd0;

  --blue-hi: #a8dcff;
  --blue: #3f7dff;
  --blue-lo: #1d3cb8;
  --red-hi: #ffb6c6;
  --red: #ff4f7b;
  --red-lo: #b81a4d;
  --green-hi: #b8ffd9;
  --green: #2fd394;
  --green-lo: #0d8a5f;
  --yellow-hi: #fff6b8;
  --yellow: #ffc53d;
  --yellow-lo: #d98500;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --tap: 48px;
  --app-max: 420px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 160ms;
  --dur-med: 340ms;
  --step-ms: 180ms;
}

.p-blue   { --p-hi: var(--blue-hi);   --p: var(--blue);   --p-lo: var(--blue-lo); }
.p-red    { --p-hi: var(--red-hi);    --p: var(--red);    --p-lo: var(--red-lo); }
.p-green  { --p-hi: var(--green-hi);  --p: var(--green);  --p-lo: var(--green-lo); }
.p-yellow { --p-hi: var(--yellow-hi); --p: var(--yellow); --p-lo: var(--yellow-lo); }