/* ───────────────────────────────────────────────────────────────
   DeftBid — Marketing Landing Page ("Ink" direction)
   A5 · Logo lockup — DB monogram mark + "DeftBid" wordmark.

   Source: design/landing/brand.jsx (Mark / Word / Lockup). The glyph is inline
   SVG (no external asset), so it renders crisply at any size and works offline.
   Sizing is driven by --mark-size / --word-size; light is default, add
   .logo--dark on dark bands.

   Markup:
     <a class="logo" href="/" aria-label="DeftBid home">
       <span class="logo__mark">
         <svg class="logo__glyph" viewBox="0 0 100 100" aria-hidden="true">
           <path fill-rule="evenodd" d="M22 14 H50 L72 22 …"/>
         </svg>
       </span>
       <span class="logo__word"><span class="deft">Deft</span><span class="bid">Bid</span></span>
     </a>
   ─────────────────────────────────────────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mark-size, 30px) * 0.34);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Mark (tile + glyph) ──────────────────────────────────────── */
.logo__mark {
  /* Consume --mark-size with a 30px fallback, mirroring .logo__word's --word-size
     (line 54). Do NOT re-declare --mark-size on this element: a custom property set
     on the element that consumes it shadows the inline `style="--mark-size:…"` on the
     .logo wrapper, which silently pinned the tile at 30px and broke per-lockup sizing
     (e.g. the proposal "Powered by" mark rendered 30px instead of 18px). */
  width: var(--mark-size, 30px);
  height: var(--mark-size, 30px);
  border-radius: calc(var(--mark-size, 30px) * 0.28);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Default tone: cobalt tile, white glyph. */
  background: var(--cobalt, #2D6BF0);
  color: #fff;
}
.logo__glyph {
  width: 60%;
  height: 60%;
  display: block;
  fill: currentColor;
}

/* ── Wordmark ─────────────────────────────────────────────────── */
.logo__word {
  font-family: var(--font-sans, 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-weight: 800;
  font-size: var(--word-size, 24px);
  letter-spacing: var(--tracking-wordmark, -0.035em);
  line-height: 1;
  white-space: nowrap;
}
.logo__word .deft { color: var(--ink, #14171C); }
.logo__word .bid  { color: var(--bid-text, #1B4DC2); }

/* ── Dark variant (dark bands: nav over hero, footer) ─────────── */
.logo--dark .logo__mark {
  background: var(--ink-2, #1B1F26);
  color: #fff;
  box-shadow: inset 0 0 0 1.25px rgba(111, 160, 255, 0.55);
}
.logo--dark .logo__word .deft { color: #fff; }
.logo--dark .logo__word .bid  { color: var(--on-dark, #6FA0FF); }

/* ── Mark tone modifiers (for mark-only use) ──────────────────── */
.logo__mark--cobalt   { background: var(--cobalt, #2D6BF0); color: #fff; box-shadow: none; }
.logo__mark--ink      { background: var(--ink, #14171C); color: var(--on-dark, #6FA0FF); box-shadow: none; }
.logo__mark--light    { background: var(--card, #fff); color: var(--cobalt, #2D6BF0); box-shadow: inset 0 0 0 1px rgba(20,23,28,0.08); }
.logo__mark--elevated { background: var(--ink-2, #1B1F26); color: #fff; box-shadow: inset 0 0 0 1.25px rgba(111,160,255,0.55); }