/* ═══════════════════════════════════════════════════════════════════
   POCITS Design Tokens — Single Source of Truth
   Hub + Portal accent colours, shared dark palette, spacing scale.
   Change here to update everywhere.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Hub accent colours — vivid, hub-identifiable ──────────── */
  --hub-commons:  #F5EDE0;   /* cream         — commons portal match   */
  --hub-book:     #E8C040;   /* rich gold     — business / Pocitbook   */
  --hub-mall:     #38C070;   /* vivid green   — marketplace            */
  --hub-cmty:     #E84880;   /* vivid rose    — community              */
  --hub-medi:     #28B8B0;   /* rich teal     — health / medical       */
  --hub-smarts:   #A870D8;   /* vivid mauve   — governance             */
  --hub-strm:     #F06840;   /* vivid coral   — stream / media         */
  --hub-chat:     #7B68EE;   /* medium slate  — AI / discovery         */
  --hub-dyk:      #40A8E0;   /* bright sky    — knowledge / Dyktionary */
  --hub-topx:     #5898F0;   /* bright blue   — rankings               */
  --hub-scout:    #68C868;   /* vivid sage    — grants                 */
  --hub-xchg:     #30C898;   /* vivid mint    — exchange hub           */
  --hub-index:    #F0A030;   /* vivid amber   — index / pricing hub    */
  --hub-reserve:  #7090C8;   /* vivid steel   — reserve hub            */

  /* ── Portal accent colours ───────────────────────────────────── */
  --portal-wecare:     #EC4899;   /* rose-pink       — humanitarian          */
  --portal-pocitbook:  #FFCC00;   /* warm yellow     — Pocitbook             */
  --portal-enterprise: #C7A48F;   /* dusty blush     — community investment  */
  --portal-reserve:    #C99772;   /* warm tan        — county reserve        */
  --portal-trust:      #B85A2E;   /* warm rust       — sovereign trust       */
  --portal-commons:    #B89870;   /* warm caramel    — community infra       */
  --portal-marketing:  #f97316;   /* orange          — marketing             */
  --portal-foundation: #627C8C;   /* dark slate      — The Foundation        */
  --portal-platform:   #B8C8D4;   /* light blue-grey — The Platform          */
  --portal-network:    #ffffff;   /* white           — The Network / Places  */
  --portal-exchange:   #B86434;   /* rust            — community exchange    */
  --portal-index:      #C49060;   /* caramel         — advertising index     */
  --portal-smarts:     #506070;   /* charcoal-slate  — governance            */
  --portal-treasury:   #C8963C;   /* gold            — financial instruments */
  --portal-wallet:     #F59E0B;   /* amber           — personal pocit wallet */
  --portal-apps:       #5E8FA8;   /* muted steel-teal — apps & tools suite   */

  /* ── Shared portal dark palette ─────────────────────────────── */
  --pg-bg:        #080c10;
  --pg-bg-alt:    #0f1318;
  --pg-surface:   #0d1117;
  --pg-surface2:  #111820;
  --pg-text:      #e8ecf0;
  --pg-muted:     #7a8896;
  --pg-border:    rgba(255,255,255,0.09);

  /* ── Accent bar ──────────────────────────────────────────────── */
  --accent-bar-height: 28px;

}

/* ── Accent bar ──────────────────────────────────────────────────── */
/* Starts as position:relative in normal flow (flush with header).    */
/* pinAccentBar() in pocits-tokens.js upgrades it to position:fixed   */
/* after load, bypassing the overflow-x:hidden sticky breakage.       */
.portal-accent-bar {
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--accent-bar-height, 32px);
  z-index: 99;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--accent-bar-color, #94a3b8);
}
.portal-accent-bar.is-pinned {
  position: fixed;
  top: var(--header-height, 70px);
}

.accent-bar-inner {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0 20px;
  white-space: nowrap;
}

.accent-bar-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  flex-shrink: 0;
  padding-right: 14px;
  border-right: 1px solid rgba(0,0,0,0.18);
  margin-right: 14px;
}

.accent-bar-ticker {
  font-size: 11px;
  font-weight: 500;
  color: rgba(0,0,0,0.60);
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
}

/* Scrolling ticker animation — activate by adding .ticker--scroll */
.ticker--scroll .accent-bar-ticker-text {
  display: inline-block;
  animation: ticker-scroll 28s linear infinite;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Light text variant for darker accent colours */
.accent-bar--light .accent-bar-label,
.accent-bar--light .accent-bar-ticker {
  color: rgba(255,255,255,0.70);
}
.accent-bar--light .accent-bar-label {
  border-right-color: rgba(255,255,255,0.25);
}

/* Narrow variant — place profiles, member profiles (no text, 6px colour strip) */
.accent-bar--narrow {
  height: 6px;
}
.accent-bar--narrow .accent-bar-inner {
  display: none;
}

/* Extra body offset once bar is pinned (added by pinAccentBar()) */
body.bar-pinned {
  padding-top: calc(var(--header-height, 70px) + var(--accent-bar-height, 32px));
}
body.has-narrow-accent-bar.bar-pinned {
  padding-top: calc(var(--header-height, 70px) + 6px);
}