/* ============================================================
   WaveKey — Secondary colour targets
   Repoints the link pills and the bar chart to --sec (set by
   wavekey-theme.js). Load AFTER the inline <style> (just before </head>).
   --sec defaults to the brand pink until the secondary picker sets it.
   ============================================================ */
:root{ --sec:#e8186d; --sec-bright:#ff1f80; --sec-dim:#b01253; }

/* Link pills (Call / Email / Website …) — override the per-platform inline
   colours so they read as one cohesive secondary colour. */
.profile-link-chip{
  color:var(--sec) !important;
  border-color:color-mix(in srgb, var(--sec) 45%, transparent) !important;
  background:color-mix(in srgb, var(--sec) 14%, transparent) !important;
}
/* keep the little icon inside matching the pill */
.profile-link-chip svg{ stroke:var(--sec) !important; }

/* Bar chart — today bar + past bars driven by secondary */
.bar.today{ background:var(--sec) !important; }
.bar-wrap.current .bar-label{ color:var(--sec) !important; }
.bar-wrap:hover .bar.today{ background:var(--sec-bright) !important; }
.bar-wrap:hover .bar{ background:color-mix(in srgb, var(--sec) 45%, transparent) !important; }
/* past bars: a soft secondary tint instead of flat grey, so the chart reads on-theme */
.bar{ background:color-mix(in srgb, var(--sec) 24%, var(--surface3)) !important; }

/* Secondary swatch grid inherits the existing .theme-grid / .theme-swatch styles.
   The active ring is already handled by .theme-swatch.active in your app CSS. */