/* Reach brand palette — see DESIGN.md for usage rules. Reach is a Hilo product:
   Purple and Ink are the family colors; Lilac, Navy and the thread are Reach's own. */
:root {
  /* core */
  --reach-purple: #6C5CFF;     /* primary — knot on light, CTAs, links, one emphasis per view */
  --reach-lilac:  #8F80FF;     /* the knot and links on dark surfaces */
  --reach-ink:    #0D1133;     /* hero and nav surface, wordmark on light, primary text */
  --reach-white:  #FFFFFF;

  /* the thread — Purple → Blue → Teal, only where the thread literally appears */
  --reach-blue:   #4A90E2;     /* transit color of the thread; data viz */
  --reach-teal:   #00B894;     /* the reached dot; confirmations, "done", success */
  --reach-thread: linear-gradient(90deg, #6C5CFF 0%, #4A90E2 60%, #00B894 100%);

  /* neutrals */
  --reach-paper:     #F8F8FC;  /* page background, alternating sections */
  --reach-soft-gray: #F5F5F7;  /* cards on paper, inputs, chat bubbles */
  --reach-line:      #E5E4F2;  /* hairline borders */
  --reach-muted:     #505570;  /* secondary text on light */
  --reach-muted-dark:#B9B8D0;  /* secondary text on Ink */

  /* tints and states */
  --reach-purple-tint:   #ECEAFB;   /* chips, selection, quiet emphasis */
  --reach-purple-hover:  #5B4CE6;
  --reach-purple-active: #5140C8;
  --reach-lavender:      #C9B8FF;   /* labels and quotes on very dark surfaces */
  --reach-purple-12: rgba(108, 92, 255, 0.12);
  --reach-purple-24: rgba(108, 92, 255, 0.24);

  /* dark UI (dashboard, Punch) */
  --reach-surface-dark:   #17171A;
  --reach-surface-dark-2: #26262B;
  --reach-line-dark:      #3A3A40;

  /* channel colors — used only to keep channel chrome authentic, never as brand */
  --channel-whatsapp:      #25D366;
  --channel-whatsapp-deep: #075E54;
}