/* ═══ LAYER 3 — THEME PALETTE: HEALTHY TOGETHER (default) ════════════════
   Private hue palette. A new project = a new theme block re-pointing these
   plus the role mapping in roles.css. Applied themes: Healthy Together
   (default), Atlas — both share this palette today. */
:root,
[data-theme="healthy-together"],
[data-theme="atlas"],
[data-theme="ht-resident"],
[data-theme="ht-admin"] {
  /* Brand hue — the ONE knob a product re-points. Every tint below is a
     color-mix of it, so a blue product gets blue tints, blue selected states,
     a blue focus ring and blue-cast shadows from this line alone. */
  --ht-primary:        #4C1EA8;
  --ht-primary-dark:   #3B1683;
  --ht-primary-wash:   color-mix(in srgb, var(--ht-primary) 5%, white);   /* outlined info card */
  --ht-primary-tint:   color-mix(in srgb, var(--ht-primary) 12%, white);  /* tint fills, badges (deepened 8->12% 2026-08-12) */
  --ht-primary-select: color-mix(in srgb, var(--ht-primary) 18%, white);  /* selected on grey surfaces (deepened 14->18% 2026-08-12) */
  --ht-primary-stroke: #E0D3F8;  /* tint-button + selected-card stroke (Figma violet/stroke) */

  /* Royal blue */
  --ht-royal:          #4860FC;
  --ht-royal-text:     #2C3ECF;   /* text-safe on white, 7.8:1 */
  --ht-royal-tint:     color-mix(in srgb, var(--ht-royal) 12%, white);  /* was literal #EEF0FE; now rule-derived like the violet tints (2026-08-12) */
  --ht-royal-mid:      #DDE2FD;   /* number chips, avatars */

  /* Page + ink */
  --ht-page:           #FCFBFE;   /* violet-tinted near-white (lightened from #F8F7FC, 2026-08-19 Emma) */
  --ht-hairline:       #E4E4EC;
  --ht-border:         #D6D5E0;   /* interactive-control stroke */
  --ht-border-strong:  #9C9AAF;
  --ht-ink-surface:    #201C33;   /* admin bar + the ONE live band */
  --ht-on-ink:         #FFFFFF;
  --ht-on-ink-muted:   #C9C4DD;
  --ht-on-ink-subtle:  #A9A4C0;

  /* Text */
  --ht-text:           #1D1A2E;
  --ht-text-head:      #14111F;
  /* The muted step for text on a GREY OR TINTED fill (2026-08-03). --ht-text-muted
     is calibrated for white and only reaches 3.82:1 on --ht-grey-4, so labels on
     a track, chip or badge use this instead: 6.09:1 there, and still quieter
     than an --ht-action selected label at 8.07:1. Not a body colour. */
  --ht-text-on-tint:   #52525E;
  --ht-text-muted:     #6B7280;
  --ht-text-subtle:    #9CA3AF;

  /* Status — vivid accents (dots/icons/checks) + AA text steps + tints.
     Warning family is SUNFLOWER.
     Tints levelled 2026-08-03: green and amber were still carrying pre-pass
     fills, so a success or warning card read heavier than the same info card.
     All four tint fills now sit at one depth against the page — green pulled
     toward mint (it was sage-olive), amber toward warm cream (it was
     highlighter). Vivid accents and AA text steps are unchanged; a lighter
     fill only improves their contrast. */
  --ht-green-vivid:    #16A34A;
  --ht-green-text:     #196A47;
  --ht-green-bg:       #D4F0DF;  /* deepened 2026-08-12 (was #E4F7EC); green-text 5.43:1 */
  --ht-green-line:     #ABE3C4;
  /* Live pulse — reads brighter than success green on the dark ink band, where
     #16A34A goes muddy. The ONE deliberately separate green; dots on light
     surfaces still use --ht-green-vivid. */
  --ht-live:           #3DD68C;
  --ht-amber-vivid:    #F5B700;
  --ht-amber-text:     #7D5700;
  --ht-amber-bg:       #FDEFC7;  /* deepened 2026-08-12 (was #FEF4D8); amber-text 5.67:1, amber-icon glyphs 4.3:1 */
  --ht-amber-line:     #F0D585;
  --ht-amber-solid:    #FFC53D;
  --ht-amber-note:     #FAE27E;
  --ht-red-vivid:      #DC2626;
  --ht-red-text:       #B91C1C;
  --ht-red-bg:         #FBD3D3;  /* deepened 2026-08-12 (was #FEE2E2); red-text 4.73:1 */
  --ht-red-line:       #F2C7C7;
  --ht-red-soft:       var(--ht-red-wash);
  --ht-info-line:      #C9D1FD;

  /* Wash — the barely-there fill for OUTLINED status cards (2026-08-03).
     The saturated hue does the work as a 1px stroke; the fill only warms the
     card behind it. Distinct from the -bg mid tints above, which still fill
     icon circles and badge pills, where a near-white fill would vanish. */
  --ht-green-wash:     #F2FBF6;
  --ht-amber-wash:     #FEFBEA;
  --ht-red-wash:       #FEF3F3;

  /* Icons/glyphs ON a mid tint (a11y): amber vivid is yellow-on-yellow and
     never clears 3:1 on any light fill, so amber icons always use this darker
     gold. Green/red vivid do clear 3:1 on the wash fills, so they stay vivid. */
  --ht-amber-icon:     #A16207;

  /* Status dot-pill fills — lightened & unified so no status reads heavier
     than the rest (2026-07-22). Dot + AA text carry meaning; fill recedes.
     Badges use these; the notification-card tints above now sit at the same
     depth, so the two families finally agree. */
  --ht-badge-info-bg:     #E5E8FE;  --ht-badge-info-line:     #CBD2FD;
  --ht-badge-success-bg:  #CCEED9;  --ht-badge-success-line:  #96D5AE;
  --ht-badge-warning-bg:  #FEEDB2;  --ht-badge-warning-line:  #ECCC5E;
  --ht-badge-danger-bg:   #FBE0E0;  --ht-badge-danger-line:   #F0C1C1;

  /* Shadows — cast in the brand hue, so they follow a re-pointed primary. */
  --ht-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ht-primary-dark) 5%, transparent);
  /* shadow-sm thrown sideways, for a vertical rail's inward edge. Same 5% so a
     rail and a card read as the same elevation step; blur is 3px not 2px
     because it has to register across a near-white field (2026-08-19, Emma). */
  --ht-shadow-rail: 1px 0 3px color-mix(in srgb, var(--ht-primary-dark) 5%, transparent);
  --ht-shadow-md: 0 4px 12px -2px color-mix(in srgb, var(--ht-primary-dark) 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--ht-primary-dark) 3%, transparent);
  --ht-shadow-lg: 0 12px 32px -8px color-mix(in srgb, var(--ht-primary-dark) 12%, transparent), 0 2px 6px color-mix(in srgb, var(--ht-primary-dark) 4%, transparent);
  /* Float — the wide soft cast on editorial cards that sit directly on the page
     (program cards). Figma: 0 4px 30px rgba(76,30,168,0.09). */
  --ht-shadow-float: 0 4px 30px color-mix(in srgb, var(--ht-primary) 9%, transparent);
}