:root {
  /* ─── Brand / Primary ─── */
  --color-primary:        #592f91;  /* purple — 30+ uses across CSS + templates */
  --color-primary-hover:  #4b0082;  /* darker purple — button hover states */
  --color-primary-dark:   #7553A3;  /* footer, some button contexts */
  --color-primary-light:  #D3C4EA;  /* header accents, decorative elements */
  --color-primary-subtle: #f5f0ff;  /* light purple background — hover fills, filter sections */

  /* ─── Brand / Accent ─── */
  /* replaces orange --color-cta */
  --color-accent:         #F90473;  /* pink/magenta — Log in button, circlebadge alt */
  --color-accent-hover:   #d4006a;  /* darker pink — hover state */

  /* ─── Text ─── */
  --color-text:           #14161a;  /* primary text — 11 uses */
  --color-text-secondary: #313033;  /* secondary text — 9 uses */
  --color-text-body:      #3B3E51;  /* card/table body text — project lists, result cards, task labels */
  --color-text-muted:     #49454f;  /* help text, labels — 4+ uses */
  --color-text-subtle:    #79747e;  /* placeholder, meta — 4 uses */
  --color-text-faint:     #999A9F;  /* borders, disabled — 8+ uses */

  /* ─── Semantic ─── */
  --color-success:        #0EAD83;  /* green active states — 4 uses */
  --color-error:          #E02B2B;  /* red error states — 3 uses */
  --color-link:           #185FA5;  /* hyperlink blue */

  /* ─── Backgrounds ─── */
  --color-bg-subtle:      #f8f7fb;  /* light lavender page bg — 2+ uses */
  --color-white:          #ffffff;  /* 23+ uses */

  /* ─── Borders ─── */
  --color-border:         #e3dedd;  /* standard border — card edges, gauge pills */
  --color-hairline:       #f2eeec;  /* inner dividers — row separators, section borders */
  --color-border-light:   #dee2e6;  /* lighter border — Bootstrap-adjacent */
  --color-border-muted:   #B2AAAA;  /* outcome gauge pill — from production .btnStyle */

  /* ─── Surface Shadows ─── */
  --shadow-card:         0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-popup:        0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-modal:        0 5px 25px rgba(0, 0, 0, 0.15);
  --shadow-focus-ring:   0 0 0 3px rgba(89, 47, 145, 0.2);

  /* ─── Border Radius ─── */
  --radius-sm:           4px;
  --radius-card:         8px;
  --radius-modal:        10px;

  /* ─── Border — Subtle (blue-tinted, used by pp-card + card-container) ─── */
  --color-border-subtle: #dce8f4;

  /* ─── UI Chrome ─── */
  --color-chrome:       #b0aab8;  /* sidenav section labels — most prominent chrome */
  --color-chrome-mid:   #c4bfcc;  /* compact metric labels, hints — mid weight */
  --color-chrome-faint: #d0ccd8;  /* arrows, decorative icons — most recessive */

  /* ─── Accent (non-primary) ─── */
  --color-heading:        #0C3964;  /* dark blue headings — 5 uses in style.css */
  --color-accent-blue:    #B5D2EF;  /* light blue header text — 6 uses */
}