/* ─────────────────────────────────────────────────────────────────────────
   Crossfeed — shared design tokens & base styles (LOCKED STYLE CONTRACT)

   Direction: dark, precise, minimal — Linear/Vercel-grade. QUIET SHELL, LOUD
   PRODUCT: the shell is calm so the live animated feed is the one vivid moving
   thing. Platform colors are SIGNAL ONLY (pills, one CTA accent, hairlines,
   status dots, focus rings). No glassmorphism, no glow on big surfaces, no
   gradient soup. Sans = Inter; a monospace carries the "console" motif.
   Update tokens HERE so the style flows everywhere.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Base + layered dark surfaces (flat, low-saturation, never pure #000) */
  --bg: #0a0a0c;
  --bg-1: #0f0f13; /* cards */
  --bg-2: #15151b; /* inputs / ghost buttons */
  --bg-3: #1c1c23; /* hover */
  --line: #232329; /* crisp 1px borders */
  --line-soft: #18181e;

  /* Text */
  --text: #f3f4f6;
  --text-dim: #a0a7b4;
  --text-faint: #7c8493; /* AA on the near-black base */

  /* Platform colors — SIGNAL ONLY */
  --twitch: #9146ff;
  --kick: #53fc18;
  --x: #ffffff;
  --x-bg: #0b0b0d;

  /* The single accent (the violet signal) — CTA, focus, hairline highlights */
  --accent: #9146ff;
  --accent-hi: #a26bff;
  --accent-soft: rgba(145, 70, 255, 0.16);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --maxw: 1180px;
  --nav-h: 64px;

  /* Type: geometric grotesk sans for everything; monospace for the console motif */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto,
    Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Subtle elevation only — soft, no glow */
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* Global safety net: neutralize all motion for users who opt out. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Quiet shell: one barely-there neutral top light, no color, no glow. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60rem 36rem at 50% -22%, rgba(255, 255, 255, 0.022), transparent 60%);
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Layout helpers ── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.mono {
  font-family: var(--mono);
}

/* ── Eyebrow: a small mono "console label" with a signal dot ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Wordmark ── */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wordmark .mark {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 17px;
  height: 17px;
}
.wordmark .mark i {
  border-radius: 1px;
  background: var(--text-faint);
}
.wordmark .mark i:nth-child(1) {
  background: var(--twitch);
}
.wordmark .mark i:nth-child(2) {
  background: var(--kick);
}
.wordmark .mark i:nth-child(3) {
  background: #fff;
}
.wordmark .mark i:nth-child(n + 4) {
  opacity: 0.5;
}

/* ── Buttons (crisp; the primary uses the single violet accent, no glow) ── */
.btn {
  --btn-bg: var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--btn-bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  background: var(--accent-hi);
}
.btn-ghost {
  background: transparent;
}
.btn-ghost:hover {
  background: var(--bg-2);
  border-color: #2d2d35;
}
.btn-lg {
  height: 50px;
  padding: 0 22px;
  font-size: 15.5px;
}
.btn-block {
  width: 100%;
}

/* ── Cards & inputs (flat surface, crisp 1px border, soft elevation) ── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.input {
  height: 46px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder {
  color: var(--text-faint);
}

/* ── Source pills = mono console tags (the personality detail) ── */
.pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  color: #fff;
}
.pill svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.pill.twitch {
  background: var(--twitch);
}
.pill.kick {
  background: var(--kick);
  color: #06200a;
}
.pill.x {
  background: var(--x-bg);
  border: 1px solid #2e2e36;
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Generic visibility utility used by the app scripts (auth/dashboard). */
.hidden {
  display: none !important;
}