/* ═══ LAYER 2 — ROLES (the public API) ══════════════════════════════════
   Components reference ONLY these role names — never hue names, never raw
   hex. Redundancy rule: color never signals function alone. Interactive
   elements always carry a control shape or underline; data color appears
   only in numeral/bar/chart contexts. */
:root {
  /* Action = the product's primary hue. All primary interactive intent, plus
     the informational status family (royal is reserved for data). */
  --ht-action:         var(--ht-primary);
  --ht-action-hover:   var(--ht-primary-dark);
  --ht-action-wash:    var(--ht-primary-wash);
  --ht-action-tint:    var(--ht-primary-tint);
  --ht-action-select:  var(--ht-primary-select);
  --ht-action-stroke:  var(--ht-primary-stroke);

  /* Data = royal. Progress, charts, numeric chips, hero depth. */
  --ht-data:           var(--ht-royal);
  --ht-data-text:      var(--ht-royal-text);
  --ht-data-tint:      var(--ht-royal-tint);
  --ht-data-mid:       var(--ht-royal-mid);

  /* Surfaces */
  --ht-bg:             var(--ht-page);
  --ht-surface:        var(--ht-grey-0);
  /* Cake-header zone — a soft step down from the white card body. 35% of
     grey-4 (~#F6F6F8, 9 levels off white): lighter than the original 45% but
     still observable, which the 25% pass was not (2026-08-19, Emma). */
  --ht-head-zone:      color-mix(in srgb, var(--ht-grey-4) 35%, white);
  /* Surface FILLS all sit one rung lighter than they used to (2026-08-19,
     Emma: "lighter universally"). Deliberately done at the ROLE layer, not by
     editing the grey ramp: grey-3 is a divider stroke 14 times over and grey-4
     is the hairline, so moving the primitives would have thinned every border
     in the system while trying to lighten fills. */
  --ht-sidebar-bg:     var(--ht-grey-1);
  --ht-inset:          var(--ht-grey-2);
  /* Held at grey-1 on purpose — an input's fill IS its affordance, and taking
     it to near-white makes fields stop reading as fields. */
  --ht-input-bg:       var(--ht-grey-1);

  /* Focus ring — the action hue at 32%, so it follows a re-pointed primary. */
  --ht-ring-color:     color-mix(in srgb, var(--ht-action) 32%, transparent);
  --ht-ring-color-danger: color-mix(in srgb, var(--ht-red-vivid) 25%, transparent);
  /* Disabled — an inert control reads as a grey shape, never a faded colored
     one: dimming the action hue keeps it looking pressable. Filled variants
     drop to the grey fill; bordered variants keep the white card face and
     grey the stroke. Exempt from the contrast gate (WCAG 1.4.3 excludes
     disabled controls), but text stays at the muted step so the label is
     still readable. */
  --ht-disabled-bg:    var(--ht-grey-3);
  --ht-disabled-line:  var(--ht-grey-4);
  --ht-disabled-text:  var(--ht-text-muted);

  --ht-hero-gradient:  linear-gradient(135deg, var(--ht-action) 0%, var(--ht-data) 100%);
  --ht-progress-fill:  var(--ht-royal);
  --ht-progress-track: var(--ht-royal-tint);
}

/* Neutral surface roles (2026-08-19, Emma) — added to close the CIVIC <-> Hearth
   mapping gaps recorded in ht-platform DL-010/MAPPING.md. Each aliases the grey
   step Hearth components already use; nothing re-renders.
   civic-bg-subtle / -component / -component-hover / -component-active /
   -popover / -placeholder / -track now have 1:1 Hearth names. */
:root {
  --ht-surface-subtle:   var(--ht-grey-2);   /* quiet section fill */
  --ht-component:        var(--ht-grey-3);   /* neutral control fill, idle */
  --ht-component-hover:  var(--ht-grey-4);   /* hover step (fig: surface/hover) */
  --ht-component-active: var(--ht-grey-5);   /* pressed step (fig: surface/pressed) — press darkens, never scales */
  --ht-popover:          var(--ht-surface);  /* floating menus/popovers; pair with --ht-shadow-lg */
  --ht-placeholder:      var(--ht-grey-4);   /* skeleton/placeholder fill (matches Skeleton) */
  --ht-track:            var(--ht-grey-4);   /* NEUTRAL track (segmented); data progress stays --ht-progress-track */
}

/* Border roles (2026-08-19, Emma) — closes the border rows of DL-010/MAPPING.md.
   civic-border-subtle / -focus / -popover now have 1:1 Hearth names. */
:root {
  --ht-divider:        var(--ht-grey-3);   /* in-card dividers (kit: border/divider) — maps civic-border-subtle */
  --ht-border-focus:   var(--ht-action);   /* focused control border; pairs with the 3px --ht-ring — maps civic-border-focus */
  --ht-border-popover: var(--ht-hairline); /* floating surface stroke; pair with --ht-shadow-lg — maps civic-border-popover */
}

/* Legacy aliases kept for back-compat with existing components */
:root {
  --ht-muted:     var(--ht-grey-1);
  --ht-secondary: var(--ht-grey-4);
  --ht-ink:       var(--ht-text-head);
  --ht-green:     #218358;
  --ht-amber:     var(--ht-amber-text);
  --ht-red:       var(--ht-red-vivid);
  --ht-red-border: var(--ht-red-line);
  --ht-r-sm: 8px; --ht-r-md: 8px; --ht-r-lg: 12px; --ht-r-xl: 12px;  /* capped 16 -> 12 (2026-08-16, Emma): 12 is the roundest corner in the system */
  --ht-green-bg-soft: var(--ht-badge-success-bg); --ht-amber-bg-soft: var(--ht-badge-warning-bg); --ht-red-bg-soft: var(--ht-red-soft);
  --ht-info: var(--ht-data-text); --ht-info-bg: var(--ht-data-tint);
  /* Consumer-compat aliases (2026-08-07, from CE participant app): */
  --ht-brand: var(--ht-action); --ht-on-brand: var(--ht-on-ink);
  --ht-text-strong-muted: var(--ht-text-on-tint);
}