/* =========================================================================
   YourTurn — Brand Wordmark (LOCKED)
   =========================================================================
   These rules MUST stay constant across every theme. The wordmark is the
   one element that does not adopt theme tokens — it's how users recognize
   YourTurn no matter which theme their group is wearing.

   Markup contract:

     <div class="brand">
       <img class="brand-mark" src="/assets/brand-mark.webp" alt="" width="24" height="24">
       <span class="wm">
         <span class="wm-your">Your</span><span class="wm-turn">Turn</span>
       </span>
     </div>

   For email signoffs (— YourTurn):

     <span class="email-signoff-from">
       — <span class="wm-your">Your</span><span class="wm-turn">Turn</span>
     </span>

   Required font import:
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
   ========================================================================= */

.brand,
.email-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-size: 18px;
}

.brand img.brand-mark,
.email-brand img.brand-mark {
  width: 24px;
  height: 24px;
  display: block;
  border-radius: 50%;
}

/* Wordmark spans — universal colors, work on light AND dark backgrounds.
   Do not override per theme. */
.brand .wm-your,
.email-brand .wm-your,
.email-signoff-from .wm-your {
  color: #B8A580;            /* warm khaki */
}

.brand .wm-turn,
.email-brand .wm-turn,
.email-signoff-from .wm-turn {
  color: #2F7B9A;            /* brand blue (matches brand mark) */
}

/* Email signoff inherits the same locked typography */
.email-signoff-from {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.05em;
}