/* =========================================================================
   DST ACADEMY — GLOBAL PRIMITIVES

   The --dstp-* palette and the shared avatar base. Loads everywhere, and
   loads first, because the podcast, universe, single-post and archive rules
   all read from it.

   Migrated out of Appearance -> Customize -> Additional CSS, 27 Aug 2026.
   Not one value changed.

   REVISED 27 Aug 2026 (v2): the avatar base moved in here. See below.

   WHY --dstp-* AND NOT --dst-*

   The plugin design system owns --dst-*. These were renamed to --dstp-* so
   the two cannot collide. Keep the p.

   WHY THE AVATAR RULES LIVE HERE AND NOT IN dst-podcast.css

   They are written in the podcast section of Additional CSS, but they are
   NOT podcast rules. They are unscoped, so today every surface gets them,
   and three templates were measured using them:

       page-podcast.php               .dst-avatar, .dst-avatar--photo
       page-dst-universe-archive.php  .dst-avatar, .dst-avatar--photo
       single-dst_feed.php            .dst-avatar, .dst-avatar--photo

   Each of those surfaces re-declares size, colour and border through its own
   scoped selector (.dst-feed-head .dst-avatar, .dst-arch-portrait .dst-avatar,
   .dst-single-metarow .dst-avatar, .dst-week-cardhead .dst-avatar) — but NONE
   of them re-declares margin-left or letter-spacing. Those two only ever came
   from the base rule below. Had the base gone into a template-gated file,
   every avatar outside the podcast page would have jumped 8px to the right,
   on four surfaces, with nothing in the console to say why.

   So: colours and base here, sizes at each surface. That is what the site
   already does; this just puts it somewhere honest.
   ====================================================================== */


/* -------------------------------------------------------------------------
   1. THE PALETTE
---------------------------------------------------------------------------- */

:root {
	--dstp-navy: #0E1A3A;
	--dstp-blue: #0772A7;
	--dstp-blue-hover: #095e8a;
	--dstp-deep-blue: #042C53;
	--dstp-gold: #F3C26D;
	--dstp-gold-bright: #FFD073;
	--dstp-text: #1a1a1a;
	--dstp-text-soft: #5a6072;
	--dstp-text-muted: #8b92a3;
	--dstp-bg-page: #ffffff;
	--dstp-bg-strip: #f5f6f9;
	--dstp-bg-card: #ffffff;
	--dstp-bg-expanded: #FEF7E6;
	--dstp-border: #e4e6ec;
	--dstp-border-gold: #F3C26D;
	--dstp-radius: 12px;
	--dstp-radius-sm: 8px;
}


/* -------------------------------------------------------------------------
   2. THE AVATAR BASE

   Every surface overrides width/height/font-size for its own row. What
   survives from here on all of them is margin-left, letter-spacing, and the
   colour classes.
---------------------------------------------------------------------------- */

.dst-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--dstp-navy);
	border: 2px solid #fff;
	margin-left: -8px;
}

.dst-avatar:first-child {
	margin-left: 0;
}

.dst-avatar--photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: transparent;
	font-size: 0;
}


/* -------------------------------------------------------------------------
   3. THE AVATAR COLOURS

   Colour only. Duplicated downstream in the podcast and universe sections of
   the original CSS; those copies are identical, so whichever wins paints the
   same pixel. This is the copy that guarantees the archive page has them.
---------------------------------------------------------------------------- */

.dst-avatar--blue {
	background: #BFD7EA;
}

.dst-avatar--purple {
	background: #D6CFEC;
}

.dst-avatar--gold {
	background: #FBE6BC;
}

.dst-avatar--coral {
	background: #F5BFB9;
}

.dst-avatar--green {
	background: #C7E3D2;
}