/* ReturnMePlz — color tokens. Source: docs/BRAND.md + Brand Asset Pack V3 */
:root {
  /* Base brand palette */
  --rmp-teal: #17B8B0;
  --rmp-dark-teal: #0F6E69;
  --rmp-yellow: #FFC857;
  --rmp-charcoal: #1F2933;
  --rmp-light-grey: #F2F4F5;
  --rmp-white: #FFFFFF;

  /* Neutrals used in the product UI (Tailwind gray equivalents seen in code) */
  --rmp-border: #E5E7EB;        /* gray-200 — input + card borders */
  --rmp-border-light: #F3F4F6;  /* gray-100 — hairline dividers */
  --rmp-placeholder: #9CA3AF;   /* gray-400 — input placeholders */

  /* Semantic — text */
  --text-heading: var(--rmp-dark-teal);
  --text-body: var(--rmp-charcoal);
  --text-muted: rgba(31, 41, 51, 0.6);   /* charcoal/60 */
  --text-faint: rgba(31, 41, 51, 0.4);   /* charcoal/40 */
  --text-on-teal: #FFFFFF;
  --text-on-yellow: var(--rmp-dark-teal);

  /* Semantic — surfaces */
  --surface-page: var(--rmp-white);
  --surface-card: var(--rmp-light-grey);
  --surface-dark: var(--rmp-dark-teal);
  --surface-yellow-tint: rgba(255, 200, 87, 0.2);  /* reward pill bg */
  --surface-teal-tint: rgba(23, 184, 176, 0.1);    /* success icon bg */

  /* Semantic — interactive */
  --action-primary: var(--rmp-teal);
  --action-accent: var(--rmp-yellow);
  --focus-ring: var(--rmp-teal);
  --focus-ring-strong: var(--rmp-dark-teal);

  /* Feedback (Tailwind reds/ambers as used in code) */
  --error-text: #DC2626;        /* red-600 */
  --error-border: #F87171;      /* red-400 */
  --warn-bg: #FFFBEB;           /* amber-50 — stalled banner */
  --warn-border: #FDE68A;       /* amber-200 */
  --warn-text: #B45309;         /* amber-700 */
}