/**
 * Apex shared visual system — Bridge AI OS home + WhatsApp login.
 * Arena cavern (magenta L / cyan R), Outfit/DM Sans, square CTAs, glass chrome.
 * Login further specializes via body.wa-login-kasi + login-tokoloshe.css.
 */
:root {
  /* Arena / night (canonical shared surface) */
  --night-indigo: #0a0614;
  --magenta-glow: #e83c8c;
  --cyan-glow: #3ec8f0;
  --card-glass: rgba(18, 10, 28, 0.82);
  --card-rim: rgba(232, 60, 140, 0.35);
  --mist: rgba(232, 60, 140, 0.08);
  --river-slate: #3a2048;

  /* Readable ink on arena (default for apex-arena / wa-login) */
  --ink: #f2e8f4;
  --ink-soft: #d4c0e0;
  --muted: #b8a0c8;
  --line: rgba(232, 60, 140, 0.4);
  --surface: rgba(18, 10, 28, 0.92);
  --paper: #0a0614;
  --paper-deep: #1a0e28;

  /* Accents (shared with tokoloshe companion language) */
  --dust-gold: #c9a227;
  --taxi: #f0c43a;
  --neon-soft: #e87a3a;
  --earth: #c9a88a;
  --ochre: #c9a227;
  --umber: #8a6240;

  --font-display: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --good: #5ecf8a;
  --warn: #e0b84a;
  --bad: #e06070;
  --accent: var(--magenta-glow);

  --arena-bg: url('/visual-kit/nightmare/bg-arena-platform.jpg?v=20261019arena2');
  --arena-bg-2x: url('/visual-kit/nightmare/bg-arena-platform@2x.jpg?v=20261019arena2');
}

/* Shared arena plate (home + login atmospheres) */
.apex-arena,
body.apex-arena {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-body);
  background-color: var(--night-indigo);
  background-image:
    linear-gradient(
      180deg,
      rgba(10, 6, 20, 0.28) 0%,
      rgba(8, 2, 18, 0.18) 42%,
      rgba(6, 4, 14, 0.42) 100%
    ),
    image-set(var(--arena-bg) 1x, var(--arena-bg-2x) 2x),
    var(--arena-bg);
  background-size: cover, cover, cover;
  background-position: center bottom, center bottom, center bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  overflow-x: hidden;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .apex-arena,
  body.apex-arena {
    background-attachment: scroll, scroll, scroll;
    background-size: cover, cover, 100% auto;
    background-position: center bottom, center 62%, center bottom;
  }
}

/* Glass card chrome (home panels + login .card) */
.apex-glass,
.apex-arena .card {
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  background: var(--card-glass);
  border: 1px solid var(--card-rim);
  color: var(--ink);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(232, 60, 140, 0.12),
    inset 0 1px 0 rgba(255, 200, 240, 0.08);
}

/* Apex CTA — square / ghost (works on arena light ink) */
.apex-btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--night-indigo);
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  appearance: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.apex-btn:hover,
a.btn:hover,
button.btn:hover {
  background: var(--magenta-glow);
  border-color: var(--magenta-glow);
  color: #fff;
  transform: none;
  box-shadow: 0 0 24px rgba(232, 60, 140, 0.35);
}
.apex-btn.ghost,
a.btn.ghost,
button.btn.ghost {
  background: transparent;
  color: var(--ink);
}
.apex-btn.ghost:hover,
a.btn.ghost:hover,
button.btn.ghost:hover {
  background: rgba(62, 200, 240, 0.12);
  border-color: var(--cyan-glow);
  color: var(--ink);
  box-shadow: 0 0 20px rgba(62, 200, 240, 0.2);
}
a.btn.primary,
button.btn.primary,
a.btn:not(.ghost):not(.primary) {
  /* default filled stays ink-on-night */
}
a.btn.primary,
button.btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--night-indigo);
}
a.btn.primary:hover,
button.btn.primary:hover {
  background: var(--magenta-glow);
  border-color: var(--magenta-glow);
  color: #fff;
}

/* Brand mark shared typography */
.apex-brand-mark,
.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 0.95;
}
.apex-brand-mark em,
.brand-mark em {
  font-style: normal;
  color: var(--magenta-glow);
}