/* ==========================================================================
   collectormarket.gg — brand styles (logo concept D)
   Two colours only: neon pink + neon purple, on a deep ink background.
   ========================================================================== */

/* ---------- Font: Outfit (variable 100–900, Latin subset, SIL OFL) ---------- */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Variable-latin.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand colours (dark UI — default) */
  --cm-pink: #FF3EA5;
  --cm-purple: #B26BFF;
  --cm-bg: #16131F;
  --cm-surface: #211B33;
  --cm-text: #F4F0FF;
  --cm-text-muted: #C9C1E0;

  /* Deeper versions for light backgrounds (WCAG AA on #F7F3FF) */
  --cm-pink-deep: #D6127F;
  --cm-purple-deep: #7C3AED;
  --cm-bg-light: #F7F3FF;

  /* Neon glow */
  --cm-glow-pink: 0 0 18px rgb(255 62 165 / 0.45);
  --cm-glow-purple: 0 0 18px rgb(178 107 255 / 0.45);

  /* Type */
  --cm-font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cm-tracking-tight: -0.024em; /* the wordmark's letter-spacing */

  /* Logo heights (lockup width follows automatically) */
  --cm-logo-h-sm: 28px;
  --cm-logo-h-md: 40px;
  --cm-logo-h-lg: 64px;
  --cm-logo-h-xl: 96px;

  --cm-radius: 12px;
  color-scheme: dark;
}

/* Light theme: opt in with <html data-theme="light"> */
:root[data-theme="light"] {
  --cm-pink: var(--cm-pink-deep);
  --cm-purple: var(--cm-purple-deep);
  --cm-bg: var(--cm-bg-light);
  --cm-surface: #FFFFFF;
  --cm-text: #1A1340;
  --cm-text-muted: #4A4370;
  --cm-glow-pink: none;
  --cm-glow-purple: none;
  color-scheme: light;
}

/* ---------- Base ---------- */
.cm-theme {
  background: var(--cm-bg);
  color: var(--cm-text);
  font-family: var(--cm-font);
}

/* ---------- Logo ----------
   Markup (see html/usage.html):
   <a class="cm-logo cm-logo--md" href="/">
     <picture> … <img class="cm-logo__full" …> </picture>
     <img class="cm-logo__icon" …>
   </a>
*/
.cm-logo {
  --cm-logo-h: var(--cm-logo-h-md);
  display: inline-flex;
  align-items: center;
  height: var(--cm-logo-h);
  line-height: 0;
  max-width: 100%;
  min-width: 0;
  text-decoration: none;
}
.cm-logo picture { display: contents; }
.cm-logo img {
  display: block;
  height: var(--cm-logo-h);
  width: auto;
  max-width: 100%;            /* shrinks on narrow screens instead of overflowing */
  object-fit: contain;
  object-position: left center;
}
.cm-logo__full { aspect-ratio: 7.2025; }   /* flat lockups */
.cm-logo__icon { aspect-ratio: 100 / 116; display: none !important; }

.cm-logo--sm { --cm-logo-h: var(--cm-logo-h-sm); }
.cm-logo--md { --cm-logo-h: var(--cm-logo-h-md); }
.cm-logo--lg { --cm-logo-h: var(--cm-logo-h-lg); }
.cm-logo--xl { --cm-logo-h: var(--cm-logo-h-xl); }

/* Neon glow done in CSS, so one flat asset serves every size */
.cm-logo--glow img {
  filter: drop-shadow(0 0 calc(var(--cm-logo-h) * 0.18) rgb(255 62 165 / 0.35))
          drop-shadow(0 0 calc(var(--cm-logo-h) * 0.08) rgb(178 107 255 / 0.35));
}
:root[data-theme="light"] .cm-logo--glow img { filter: none; }

/* Collapse to the cartridge icon on narrow screens: add .cm-logo--responsive */
@media (max-width: 480px) {
  .cm-logo--responsive .cm-logo__full { display: none !important; }
  .cm-logo--responsive .cm-logo__icon { display: block !important; }
}

/* Visible focus ring for the logo link */
.cm-logo:focus-visible {
  outline: 2px solid var(--cm-purple);
  outline-offset: 6px;
  border-radius: 6px;
}

/* ---------- Live-text wordmark (when an image isn't possible) ---------- */
.cm-wordmark {
  font-family: var(--cm-font);
  font-weight: 700;
  letter-spacing: var(--cm-tracking-tight);
  line-height: 1;
  white-space: nowrap;
}
.cm-wordmark__a { color: var(--cm-pink); text-shadow: var(--cm-glow-pink); }
.cm-wordmark__b { color: var(--cm-purple); text-shadow: var(--cm-glow-purple); }
.cm-wordmark__tld { color: var(--cm-pink); font-weight: 600; text-shadow: var(--cm-glow-pink); }

/* ---------- Colour utilities ---------- */
.cm-text-pink { color: var(--cm-pink); }
.cm-text-purple { color: var(--cm-purple); }
.cm-neon-pink { color: var(--cm-pink); text-shadow: var(--cm-glow-pink); }
.cm-neon-purple { color: var(--cm-purple); text-shadow: var(--cm-glow-purple); }

/* ---------- Buttons ---------- */
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--cm-radius);
  border: 2px solid transparent;
  font: 600 1rem/1 var(--cm-font);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cm-btn--primary {
  background: var(--cm-pink);
  color: var(--cm-bg);
}
.cm-btn--primary:hover { box-shadow: var(--cm-glow-pink); }
.cm-btn--secondary {
  background: transparent;
  border-color: var(--cm-purple);
  color: var(--cm-purple);
}
.cm-btn--secondary:hover {
  background: var(--cm-purple);
  color: var(--cm-bg);
  box-shadow: var(--cm-glow-purple);
}
.cm-btn:focus-visible {
  outline: 2px solid var(--cm-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cm-btn { transition: none; }
}