/* ═══════════════════════════════════════════════════════════════════
   BRAND ALIGNMENT — Splurjj + GoalGraph take the Splurjj Shout palette
   Shout palette:  pink #e8117a / #ff3d8f  ·  violet #8b5cf6  ·  teal #2dd4bf
   Linked LAST in <head> on the public Splurjj and GoalGraph pages.
   TO UNDO: remove the <link ... brand-shout.v1.css> line from those pages.
   NOTE: /css/* is cached immutable (1 year). Rename to brand-shout.v2.css
   when changing, and update the <link> tags.
   Scope: public pages only (admin / CMS / seed tools are left alone).
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────
   design-system.css and most pages read --red; GoalGraph pages read --gold.
   Re-pointing the tokens recolours everything that uses them.            */
:root{
  --red:#e8117a;
  --red-bright:#ff3d8f;
  --red-soft:#ff7aa8;
  --red-dim:#6b0a3a;
  --red-glow:rgba(232,17,122,.22);
  --red-glow-sm:rgba(232,17,122,.10);

  --gold:#ff3d8f;      /* GoalGraph chrome accent (name kept so existing rules work) */
  --gold2:#ff7aa8;
  --purple:#8b5cf6;

  --brand-pink:#e8117a;
  --brand-pink-2:#ff3d8f;
  --brand-violet:#8b5cf6;
  --brand-teal:#2dd4bf;
  --brand-grad:linear-gradient(90deg,#e8117a,#ff3d8f);
  --brand-grad-wide:linear-gradient(90deg,#8b5cf6,#e8117a);
}

/* ── 2. Splurjj nav (js/nav.js injects hard-coded red with !important;
        "html" in front raises specificity so these win) ─────────────── */
html #nav .nav__logo span{color:#e8117a !important}
html .nav-goals-pill{background:linear-gradient(90deg,#e8117a,#ff3d8f) !important}
html .nav-sub-pill{background:rgba(232,17,122,.12) !important;border-color:rgba(232,17,122,.3) !important;color:#ff3d8f !important}
html .nav-sub-pill:hover{background:rgba(232,17,122,.22) !important}

/* ── 3. GoalGraph chrome (goalgraph.html, goalgraph-entity.html) ────
   Entity-TYPE colours (person blue, company violet, skill green …) and
   the gold/silver/bronze BADGE levels are deliberately left alone: they
   carry meaning, not branding.                                          */
.topbar-logo{
  background:var(--brand-grad-wide);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.topbar-badge{
  background:rgba(232,17,122,.14);
  border-color:rgba(232,17,122,.38);
  color:var(--gold);
}
.topbar-search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,17,122,.14)}
.nav-btn:not(.outline){background:var(--brand-grad);color:#fff}
.nav-btn.outline:hover{border-color:var(--gold);color:var(--gold);background:rgba(232,17,122,.08)}
.hero-ql:hover{background:rgba(232,17,122,.12);border-color:rgba(232,17,122,.4);color:var(--gold)}
.hero{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(139,92,246,.18) 0%,transparent 70%),
    linear-gradient(180deg,#0d0b18 0%,var(--bg) 100%);
}
.hero::before{background:none}
.compare-col:last-child{border-color:rgba(232,17,122,.3);background:rgba(232,17,122,.05)}
.featured-card:hover{box-shadow:0 8px 32px rgba(232,17,122,.14)}
.article-link{background:rgba(232,17,122,.06);border-color:rgba(232,17,122,.16)}
.article-link:hover{background:rgba(232,17,122,.12)}
.contrib-pill:hover{border-color:rgba(232,17,122,.35);color:var(--gold);background:rgba(232,17,122,.06)}
.spinner{border-top-color:var(--gold)}