/* ============================================================================
 * holders.vote — COLOR MAP (example-specific.css)
 *
 * A diagnostic stylesheet: it changes NOTHING but color. Every styleable hook
 * gets its own distinct, hard-to-confuse color so you can load this on a
 * community and visually map which class paints which pixel. Nothing here
 * touches layout, spacing, fonts, radius, borders-width, or shadows.
 *
 * Scoped to `[data-hv-community]` so it applies to whichever community loads it.
 *
 * ── LEGEND ────────────────────────────────────────────────────────────────
 *   TOKENS
 *     crimson #e6194b .... --hv-accent            pale pink #fddce4 .. --hv-accent-soft
 *     dk crimson #b3123a .. --hv-accent-strong    orange #f58231 ..... --hv-up
 *     royal #4363d8 ...... --hv-down              lavender bg ........ --hv-bg
 *     mint #eafff2 ....... --hv-surface           pale yellow ........ --hv-surface-2
 *     purple #911eb4 ..... --hv-border            magenta #f032e6 .... --hv-border-strong
 *     olive #808000 ...... --hv-text-muted        brown #9a6324 ...... --hv-text-faint
 *   CONTAINERS (background)
 *     pink #fabed4 ....... .hv-community-header    apricot #ffd8b1 .... .hv-post-card
 *     mint #aaffc3 ....... .hv-card (generic)      lavender #dcbeff ... .hv-community-about
 *     cyan #42d4f4 ....... .hv-vote                beige #fffac8 ...... .hv-comment
 *     navy #000075 ....... .hv-community-nav       indigo #7161ef ..... .hv-comment-rail
 *   BUTTONS / CHIPS / TAGS
 *     crimson ............ .hv-btn-primary         teal outline ....... .hv-btn-ghost
 *     lime #bfef45 ....... .hv-btn (base)          teal #469990 ....... .hv-chip
 *     magenta ............ .hv-chip-accent         yellow ............. .hv-tag-pin
 *     grey #a9a9a9 ....... .hv-tag-lock
 *   TEXT (color)
 *     purple ............. .hv-community-name      teal ............... .hv-community-byline
 *     blue #4363d8 ....... .hv-post-title          magenta ............ .hv-post-meta
 *     brown .............. .hv-post-excerpt        teal #17c3b2 ....... .hv-link-host
 *     purple ............. .hv-vote-score          crimson ............ .hv-post-action
 *     olive .............. .hv-muted               blue ............... .hv-post-content a
 * ─────────────────────────────────────────────────────────────────────────── */

/* --- Color tokens: anything token-driven shows its token's color --------- */
[data-hv-community] {
  --hv-accent: #e6194b;
  --hv-accent-strong: #b3123a;
  --hv-accent-soft: #fddce4;
  --hv-up: #f58231;
  --hv-down: #4363d8;

  --hv-bg: #f6eeff; /* pale lavender page background (via the app's bg layer) */
  --hv-surface: #eafff2; /* pale mint: any un-remapped card surface */
  --hv-surface-2: #fff8e1; /* pale yellow: inset/secondary surfaces */
  --hv-border: #911eb4; /* purple borders */
  --hv-border-strong: #f032e6; /* magenta strong borders */

  --hv-text: #202020;
  --hv-text-muted: #808000; /* olive */
  --hv-text-faint: #9a6324; /* brown */

  --hv-danger: #e5484d;
  --hv-success: #3cb44b;
  --hv-warning: #ffe119;

  /* Re-derive inherited text color from our token (see the color-inheritance
   * note in docs/community-custom-css.md). Color only — no other change. */
  color: var(--hv-text);
}

/* --- Containers (distinct background per surface) ------------------------- */
[data-hv-community] .hv-card {
  background-color: #aaffc3;
} /* mint — generic card */
[data-hv-community] .hv-post-card {
  background-color: #ffd8b1;
} /* apricot */
[data-hv-community] .hv-community-header {
  background-color: #fabed4;
} /* pink */
[data-hv-community] .hv-community-about {
  background-color: #dcbeff;
} /* lavender */
[data-hv-community] .hv-vote {
  background-color: #42d4f4;
} /* cyan */
[data-hv-community] .hv-comment {
  background-color: #fffac8;
} /* beige */
[data-hv-community] .hv-comment-rail {
  background-color: #7161ef;
} /* indigo */
[data-hv-community] .hv-community-nav {
  background-color: #000075;
  color: #ffffff;
} /* navy */

/* --- Buttons, chips, tags ------------------------------------------------- */
[data-hv-community] .hv-btn {
  background-color: #bfef45;
  color: #202020;
} /* lime base */
[data-hv-community] .hv-btn-primary {
  background-color: #e6194b;
  color: #ffffff;
} /* crimson */
[data-hv-community] .hv-btn-ghost {
  background-color: transparent;
  color: #469990;
  border-color: #469990;
} /* teal outline */
[data-hv-community] .hv-btn-icon {
  color: #911eb4;
} /* purple glyph */
[data-hv-community] .hv-chip {
  background-color: #469990;
  color: #ffffff;
} /* teal */
[data-hv-community] .hv-chip-accent {
  background-color: #f032e6;
  color: #ffffff;
} /* magenta */
[data-hv-community] .hv-tag-pin {
  background-color: #ffe119;
  color: #202020;
} /* yellow */
[data-hv-community] .hv-tag-lock {
  background-color: #a9a9a9;
  color: #202020;
} /* grey */

/* --- Text (distinct color per text run) ---------------------------------- */
[data-hv-community] .hv-community-name {
  color: #911eb4;
} /* purple */
[data-hv-community] .hv-community-byline {
  color: #469990;
} /* teal */
[data-hv-community] .hv-post-title {
  color: #4363d8;
} /* blue */
[data-hv-community] .hv-post-meta {
  color: #f032e6;
} /* magenta */
[data-hv-community] .hv-post-excerpt {
  color: #9a6324;
} /* brown */
[data-hv-community] .hv-post-content {
  color: #202020;
}
[data-hv-community] .hv-post-content a {
  color: #4363d8;
} /* blue links */
[data-hv-community] .hv-link-host {
  color: #17c3b2;
} /* teal */
[data-hv-community] .hv-post-action {
  color: #e6194b;
} /* crimson */
[data-hv-community] .hv-vote-score {
  color: #911eb4;
} /* purple */
[data-hv-community] .hv-comment-body {
  color: #202020;
}
[data-hv-community] .hv-comment-action {
  color: #e6194b;
} /* crimson */
[data-hv-community] .hv-muted {
  color: #808000;
} /* olive */
[data-hv-community] .hv-dot {
  color: #a9a9a9;
} /* grey */