/**
 * Subtle per-product accent — NOT full-page theming.
 * Requires body[data-product="hz|sp|dd|ddqa"].
 * Global UI actions use --action in styles.css; product color is a light brand cue only.
 */

body[data-product="hz"] {
  --product-accent: #c45c68;
  --product-accent-rgb: 196, 92, 104;
}

body[data-product="sp"] {
  --product-accent: #3d9b6a;
  --product-accent-rgb: 61, 155, 106;
}

body[data-product="dd"] {
  --product-accent: #6b9fd4;
  --product-accent-rgb: 107, 159, 212;
}

body[data-product="ddqa"] {
  --product-accent: #c9a227;
  --product-accent-rgb: 201, 162, 39;
}

/* Logo tile — subtle ring on white pill */
body[data-product] .brand-icon {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(var(--product-accent-rgb), 0.2);
}

/* Nav active — underline cue, neutral surface (overrides global action underline lightly) */
body[data-product] nav button.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-subtle);
  box-shadow: inset 0 -3px 0 var(--product-accent), var(--shadow-inset-highlight);
}

body[data-product] nav button.active:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

/* Flyout hub lit state — muted product tint */
body[data-product] .sp-nav-hub--lit,
body[data-product] .hz-nav-hub--lit,
body[data-product] .dd-nav-hub--lit {
  color: var(--product-accent);
  opacity: 0.9;
}

/* Product sub-label — muted, not shouting */
body[data-product] .brand-sub {
  color: var(--text-muted);
}

body[data-product] .brand-sub::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--product-accent);
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.75;
}