/* ============================================================
   SpiderMind brand colors — single source of truth.
   Edit ONLY here; everything that needs the SpiderMind tint
   (logo glow, brand-name gradient, accent buttons, etc.) reads
   these CSS custom properties.
   ============================================================ */

:root {
  /* Stops sampled from assets/logo.png — magenta highlight at top,
     bright purple mid, deep violet shadow */
  --spidermind-pink:        #f472b6;
  --spidermind-magenta:     #c026d3;
  --spidermind-purple:      #9333ea;
  --spidermind-purple-deep: #6d28d9;
  --spidermind-violet-deep: #4c1d95;

  /* The canonical SpiderMind gradient — use this anywhere
     the brand mark, accent text, or themed surfaces need the
     "logo color" (e.g. .cr-brand-sub, hover halos, etc.) */
  --spidermind-brand-gradient: linear-gradient(
    135deg,
    var(--spidermind-pink)    0%,
    var(--spidermind-magenta) 35%,
    var(--spidermind-purple)  60%,
    var(--spidermind-purple-deep) 100%
  );

  /* Solid pick when a single color is needed (badges, focus rings) */
  --spidermind-brand-solid: var(--spidermind-magenta);

  /* Soft glow / shadow tint matching the gradient */
  --spidermind-brand-glow: rgba(192, 38, 211, 0.45);

  /* ── Glass-card surface vars (used by every dark panel: market sections,
        store cards, build-step boxes, studio shape/relations panels, etc.)
        Edit here once and every panel re-skins.

        This gradient stack is the same vocabulary as the store-card
        thumbnail (the `.market-thumb` background) — magenta highlight
        in the upper-left corner, soft-violet halo in the upper-right,
        deep-violet base. The user picked that exact thumbnail look as
        the canonical panel color, so every surface that reads as a
        "purple panel" now matches the back-of-diagram glow. The path
        summary panel does NOT use this var, so it stays cobalt. ── */
  --sm-card-bg:
    radial-gradient(circle at 18% 14%, rgba(192, 38, 211, 0.18), transparent 42%),
    radial-gradient(circle at 86% 10%, rgba(167, 139, 250, 0.14), transparent 40%),
    linear-gradient(148deg, rgba(20, 10, 40, 0.92) 0%, rgba(14, 8, 28, 0.96) 100%);
  --sm-card-border: 1px solid rgba(167, 139, 250, 0.16);
  --sm-card-wash: linear-gradient(180deg, rgba(167, 139, 250, 0.06) 0%, transparent 40%);
  --sm-card-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    0 12px 40px rgba(76, 29, 149, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
  --sm-card-shadow-hover:
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 20px 60px rgba(76, 29, 149, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}