/* ============================================================
   CoherenIQ Brand — Logo System v1.0
   Shared across cohereniq.com and /careers
   ============================================================ */

:root{
  --logo-teal: #007a7a;
  --logo-gold: #b8880c;
}
@media (prefers-color-scheme: dark){
  :root{ --logo-teal:#00C9C8; --logo-gold:#D4A017; }
}
:root[data-theme="dark"]{ --logo-teal:#00C9C8; --logo-gold:#D4A017; }
:root[data-theme="light"]{ --logo-teal:#007a7a; --logo-gold:#b8880c; }

.wordmark{
  display:inline-flex; align-items:center; gap:9px;
  font-family:Georgia,'Times New Roman',serif; font-weight:700; letter-spacing:-1px;
  font-size:1.4rem; line-height:1; text-decoration:none; color:var(--ink);
}
.wordmark b{ font-weight:700; color:var(--logo-teal); }
.wordmark svg{ flex-shrink:0; height:1.55em; width:auto; display:block; }

/* Light/dark mark swap — mirrors the site's existing theme-token pattern */
.wordmark .mark-dark{ display:none; }
.wordmark .mark-light{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wordmark .mark-light{ display:none; }
  :root:not([data-theme="light"]) .wordmark .mark-dark{ display:block; }
}
:root[data-theme="dark"] .wordmark .mark-light{ display:none; }
:root[data-theme="dark"] .wordmark .mark-dark{ display:block; }
:root[data-theme="light"] .wordmark .mark-light{ display:block; }
:root[data-theme="light"] .wordmark .mark-dark{ display:none; }

footer .wordmark{ font-size:1.1rem; }

/* ── 3D badge treatment for the mark — delete this block to roll back ──
   A flat vector icon tilted in 3D space just looks skewed, so this isn't
   a rotation. It's a glass-dome highlight baked into the SVG itself (an
   ellipse over the hex) plus directional light/shadow — a bright rim on
   the light-source side, a soft cast shadow opposite it, and a wide
   ambient shadow for elevation. That combination is what actually reads
   as a raised, domed badge rather than flat art. ── */
.wordmark svg{
  filter:
    drop-shadow(-0.5px -0.5px 0 rgba(255,255,255,.5))
    drop-shadow(1px 1.5px 0.5px rgba(0,0,0,.4))
    drop-shadow(0 3px 5px rgba(0,0,0,.22))
    drop-shadow(0 10px 16px rgba(0,0,0,.16));
  transition: filter .3s ease, transform .3s ease;
}
.wordmark:hover svg{
  transform: translateY(-1px) scale(1.04);
}
@media (prefers-reduced-motion: reduce){
  .wordmark svg{ transition:none; }
}
/* ── end 3D badge treatment ── */