/* Flanör — Neo-clubby tokens
   Dark = primary, Light = secondary. Both share blurple as anchor. */

:root {
  /* — Neutral surfaces (DARK default) — */
  --bg-0: #07070d;
  --bg-1: #0d0d18;
  --bg-2: #14142a;
  --bg-3: #1d1d36;
  --line: rgba(255,255,255,0.12);
  --line-2: rgba(255,255,255,0.20);

  /* — Ink — */
  --ink-1: #f6f4ee;
  --ink-2: rgba(246,244,238,0.82);
  --ink-3: rgba(246,244,238,0.62);
  --ink-4: rgba(246,244,238,0.42);

  /* — Brand — */
  --blurple: #5865F2;
  --blurple-2: #8b94ff;
  --blurple-glow: rgba(88,101,242,0.55);

  /* — Neons (accents) — */
  --neon-pink: #39FF7A;
  --neon-mint: #4DEFD9;
  --neon-amber: #F5C518;
  --neon-red:  #F23F43;

  /* — Status — */
  --ok: #23A55A;
  --warn: #F0B232;
  --bad: #F23F43;

  /* — Type — */
  --serif: "Instrument Serif", "DM Serif Display", Georgia, serif;
  --sans:  "Geist", "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
  --mono:  "JetBrains Mono", "Geist Mono", "SF Mono", ui-monospace, monospace;

  /* — Radius — */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 20px;
  --r-pill: 999px;

  /* — Shadows / glows — */
  --glow-blurple: 0 0 0 1px rgba(88,101,242,.35), 0 0 24px -4px var(--blurple-glow), 0 0 60px -10px var(--blurple-glow);
  --glow-pink:    0 0 0 1px rgba(57,255,122,.35), 0 0 24px -4px rgba(57,255,122,.55);
  --glow-mint:    0 0 0 1px rgba(77,239,217,.4),  0 0 24px -4px rgba(77,239,217,.55);
  --shadow-card:  0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px rgba(0,0,0,.45);
}

[data-mode="light"] {
  --bg-0: #f3eee3;
  --bg-1: #ebe5d6;
  --bg-2: #e3dccb;
  --bg-3: #d8d0bc;
  --line: rgba(20,18,12,0.10);
  --line-2: rgba(20,18,12,0.18);

  --ink-1: #14120c;
  --ink-2: rgba(20,18,12,0.84);
  --ink-3: rgba(20,18,12,0.66);
  --ink-4: rgba(20,18,12,0.46);

  --blurple-glow: rgba(88,101,242,0.30);
  --shadow-card:  0 1px 0 rgba(255,255,255,.6) inset, 0 12px 40px rgba(20,18,12,.10);
}

/* — Grain texture (SVG noise) reusable bg — */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 0;
}
[data-mode="light"] .grain::before { opacity: 0.12; mix-blend-mode: multiply; }

/* — Mesh gradient bg (dark only) — */
.mesh-bg {
  background:
    radial-gradient(60% 50% at 12% 10%, rgba(88,101,242,.45), transparent 60%),
    radial-gradient(60% 60% at 95% 30%, rgba(57,255,122,.32), transparent 60%),
    radial-gradient(50% 60% at 50% 110%, rgba(77,239,217,.22), transparent 60%),
    var(--bg-0);
}
[data-mode="light"] .mesh-bg {
  background:
    radial-gradient(60% 50% at 12% 10%, rgba(88,101,242,.20), transparent 60%),
    radial-gradient(60% 60% at 95% 30%, rgba(57,255,122,.16), transparent 60%),
    radial-gradient(50% 60% at 50% 110%, rgba(245,197,24,.18), transparent 60%),
    var(--bg-0);
}

/* — Editorial wordmark utility — */
.wordmark {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: -0.02em;
  font-weight: 400;
  line-height: 0.85;
}

/* — Mono caps / kicker — */
.mono-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* — Pill / chip — */
.chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: rgba(255,255,255,0.03);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.chip.solid {
  background: var(--blurple);
  border-color: var(--blurple);
  color: #fff;
  box-shadow: var(--glow-blurple);
}
.chip.pink   { color: var(--neon-pink);  border-color: rgba(57,255,122,.4); }
.chip.mint   { color: var(--neon-mint);  border-color: rgba(77,239,217,.4); }
.chip.amber  { color: var(--neon-amber); border-color: rgba(245,197,24,.4); }

/* — Live/online dot — */
.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.dot.live { background: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink); animation: pulse 1.6s ease-in-out infinite; }
.dot.ok   { background: var(--ok);        box-shadow: 0 0 6px var(--ok); }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* — Marquee — */
.marquee {
  position: relative; overflow: hidden; white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: inline-flex; gap: 32px; animation: scroll 40s linear infinite; padding-left: 100%; }
@keyframes scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* — Sparkle (4-point star) — used as iconography accent — */
.spark { display: inline-block; width: 1em; height: 1em; }

/* — Scrollbar hide for in-frame scrolls — */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* — Reset for screen surfaces — */
.screen, .screen * { box-sizing: border-box; }
.screen { color: var(--ink-1); font-family: var(--sans); -webkit-font-smoothing: antialiased; }