/* ==================================================================
   MOUNII — gemeinsames Design-System
   ------------------------------------------------------------------
   Wird von der Startseite, allen Tools und (als Kopie der Tokens)
   vom Jellyfin-Theme genutzt. Farben NUR hier ändern.

   Prinzip: fast schwarz, eine einzige Signalfarbe, feine Linien,
   Monospace für alles "Technische" (Labels, Pfade, Zahlen).
   Keine Farbverläufe als Deko.
   ================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Flächen */
  --m-bg: #07080a;
  --m-bg-2: #0c0d10;
  --m-surface: #111317;
  --m-surface-2: #171a1f;
  --m-line: rgba(255, 255, 255, 0.08);
  --m-line-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --m-text: #e9ebee;
  --m-muted: #8b919b;
  --m-faint: #4f555e;

  /* Signalfarbe (RGB separat, damit rgba(var(--m-accent-rgb), .2) geht) */
  --m-accent: #3ee0ff;
  --m-accent-rgb: 62, 224, 255;
  --m-on-accent: #0a0b0d;

  /* Status */
  --m-ok: #4ade80;
  --m-warn: #fbbf24;
  --m-err: #ff5a5f;

  /* Typo */
  --m-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Form */
  --m-radius: 4px;
  --m-radius-lg: 10px;
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

::selection { background: var(--m-accent); color: var(--m-on-accent); }

/* ---------- Wortmarke: mounii_ ------------------------------------ */
.m-mark {
  font-family: var(--m-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--m-text);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.m-mark::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.14em;
  margin-left: 0.08em;
  background: var(--m-accent);
  animation: m-blink 1.1s steps(1) infinite;
}
.m-mark .m-mark-sub { color: var(--m-muted); font-weight: 400; }
@keyframes m-blink { 50% { opacity: 0; } }

/* ---------- Labels / Tags ----------------------------------------- */
.m-label {
  font-family: var(--m-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-muted);
}
.m-tag {
  font-family: var(--m-mono);
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--m-radius);
  color: var(--m-muted);
  white-space: nowrap;
}

/* ---------- Buttons ----------------------------------------------- */
.m-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font: 500 14px/1 var(--m-sans);
  color: var(--m-text);
  background: transparent;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--m-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--m-ease), border-color .25s var(--m-ease), color .25s var(--m-ease), transform .25s var(--m-ease);
}
.m-btn:hover { border-color: var(--m-text); }
.m-btn:active { transform: translateY(1px); }
.m-btn-primary {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: var(--m-on-accent);
  font-weight: 600;
}
.m-btn-primary:hover { background: var(--m-text); border-color: var(--m-text); }
.m-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .m-mark::after { animation: none; }
}