/* The Ripple Network — color system
   Deep teal leads, coral is the single accent, gold + light teal carry the rings,
   warm lilac-white is the canvas. */
:root {
  /* --- Core --- */
  --ripple-teal: #016A66;        /* primary */
  --ripple-coral: #E5625E;       /* accent — the one eye-catcher */
  --ripple-gold: #E8B23A;        /* ring */
  --ripple-teal-light: #7FD4D2;  /* ring */

  /* --- Extended accents --- */
  --ripple-teal-mid: #018C96;
  --ripple-sea: #3D7F6C;
  --ripple-gold-bright: #EFB52B;
  --ripple-gold-ink: #C98A1E;
  --ripple-plum: #462850;
  --ripple-sand: #CDBE8E;

  /* --- Neutrals & tints --- */
  --ripple-ink: #262626;         /* headings on light */
  --ripple-body: #43403F;        /* body copy */
  --ripple-muted: #8A8490;       /* captions, meta */
  --ripple-white-warm: #FAF4FB;  /* soft surface */
  --ripple-lilac: #F6EBF9;       /* page canvas */
  --ripple-lilac-line: #C8B9D6;  /* hairlines on lilac */
  --ripple-hairline: #ECE2F0;    /* card dividers */
  --ripple-card-border: #E3DCE8;

  /* --- Semantic aliases --- */
  --color-primary: var(--ripple-teal);
  --color-accent: var(--ripple-coral);
  --text-heading: var(--ripple-ink);
  --text-body: var(--ripple-body);
  --text-muted: var(--ripple-muted);
  --text-eyebrow: var(--ripple-coral);
  --surface-page: var(--ripple-lilac);
  --surface-card: #FFFFFF;
  --surface-soft: var(--ripple-white-warm);
  --surface-dark: var(--ripple-teal);
  --border-card: var(--ripple-card-border);
  --border-hairline: var(--ripple-hairline);

  /* --- On-dark (deep teal ground) --- */
  --on-dark-heading: #FFFFFF;
  --on-dark-body: #E3F1F0;
  --on-dark-eyebrow: var(--ripple-teal-light);
}