/*
 * GENERATED/SHARED FILE -- nicht forken/abweichend kopieren.
 * Kanonische Quelle: websiten/shared/kryptamc-tokens.css
 * Verwendet von: KryptaMC/frontend, Forum/frontend, Markt, KryptaMC-Team-Bewerbung-Standalone-v2/frontend
 *
 * Aendern: NUR hier bearbeiten, danach unveraendert in jedes der obigen Projekte kopieren.
 * Siehe websiten/shared/SYNC.md fuer die Kopier-Befehle.
 * Letzter Sync: 2026-09-12
 *
 * Basiert auf der "landing.css"-Palette (KryptaMC-Startseite), die bereits auf den meisten
 * aktiv gerenderten Oberflaechen dominant war (KryptaMC-Startseite, Markt, Bewerbung).
 * Drei-Schichten-Aufbau: Primitive -> Semantisch -> (projekteigene Komponenten-Tokens kommen
 * in den jeweiligen Projekt-Stylesheets dazu, nicht hier).
 */

:root {
  /* ---------- Primitive: Farben ---------- */
  --km-color-void-950: #0a0a0f;
  --km-color-void-900: #111018;
  --km-color-void-850: #121218;
  --km-color-stone-800: #1a1a24;
  --km-color-ink-100: #eae8f0;
  --km-color-muted-400: #a5a3af;
  --km-color-muted-500: #85828e;
  --km-color-purple-500: #a855f7;
  --km-color-purple-600: #8b5cf6;
  --km-color-cyan-400: #00f5d4;
  --km-color-cyan-600: #06b6d4;
  --km-color-danger-400: #ff5d7a;
  --km-color-ok-400: #33ff83;

  /* ---------- Semantisch: Farben ---------- */
  --km-bg: var(--km-color-void-950);
  --km-bg-soft: var(--km-color-void-850);
  --km-bg-elevated: var(--km-color-stone-800);
  --km-text: var(--km-color-ink-100);
  --km-muted: var(--km-color-muted-400);
  --km-muted-2: var(--km-color-muted-500);
  --km-purple: var(--km-color-purple-500);
  --km-purple-deep: var(--km-color-purple-600);
  --km-cyan: var(--km-color-cyan-400);
  --km-cyan-dark: var(--km-color-cyan-600);
  --km-danger: var(--km-color-danger-400);
  --km-ok: var(--km-color-ok-400);
  --km-line: rgba(255, 255, 255, 0.1);
  --km-line-strong: rgba(168, 85, 247, 0.55);

  /* ---------- Semantisch: Radius-Skala ----------
     Ersetzt die alte style.css-Skala (--radius:26px). Neuer Standard folgt der
     landing.css/Markt/Bewerbung-Familie (durchgaengig ~16px Karten-Radius). */
  --km-radius-sm: 10px;
  --km-radius-md: 16px;
  --km-radius-lg: 22px;
  --km-radius-full: 999px;

  /* ---------- Semantisch: Schatten-Skala ---------- */
  --km-shadow-sm: 0 16px 42px rgba(0, 0, 0, 0.24);
  --km-shadow-md: 0 18px 50px rgba(0, 0, 0, 0.32);
  --km-shadow-lg: 0 30px 85px rgba(0, 0, 0, 0.42);

  /* ---------- Semantisch: Layout ---------- */
  --km-max-width: 1280px;

  /* ---------- Primitive: Spacing-Skala (4px-Basis, rem) ----------
     Neue gemeinsame Basis fuer kuenftige Komponenten; bestehende Magic-Number-Werte
     muessen nicht rueckwirkend ersetzt werden, neue/ueberarbeitete Komponenten sollen
     diese Skala nutzen. */
  --km-space-1: 0.25rem;
  --km-space-2: 0.5rem;
  --km-space-3: 0.75rem;
  --km-space-4: 1rem;
  --km-space-5: 1.25rem;
  --km-space-6: 1.5rem;
  --km-space-8: 2rem;
  --km-space-12: 3rem;
  --km-space-16: 4rem;
  --km-space-24: 6rem;
}

/* ---------- Geteiltes Asset: Noise-Textur ----------
   Kanonische Version ohne im SVG gebackene Zusatz-Opazitaet (die alte landing.css-Kopie
   hatte zusaetzlich opacity=".8" im <rect>, wodurch die effektive Opazitaet von der auf
   zwei von drei Kopien uebereinstimmenden externen Opazitaet (.055) abwich). Anwendung:
   ein <div class="km-noise" aria-hidden="true"> als erstes Element im body. */
.km-noise {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Geteiltes Asset: Ambient-Hintergrund-Wash ----------
   Kanonische Version der doppelten Radial-Gradient-Faerbung, die bereits in Markt und
   Bewerbung fast wortgleich existierte (Opazitaet vereinheitlicht auf .18). Auf <body>
   oder ein Full-Bleed-Hintergrundelement anwenden. */
.km-ambient-wash {
  background:
    radial-gradient(ellipse 80% 38% at 50% -12%, rgba(168, 85, 247, 0.18), transparent 67%),
    radial-gradient(circle at 95% 38%, rgba(0, 245, 212, 0.06), transparent 25rem),
    linear-gradient(180deg, var(--km-color-void-950) 0%, var(--km-color-void-900) 48%, var(--km-color-void-950) 100%);
}

/* ---------- Geteilte Motion-Keyframes ---------- */
@keyframes km-float-particle {
  from { transform: translate3d(0, 0, 0); opacity: 0; }
  12%, 82% { opacity: 0.3; }
  to { transform: translate3d(3rem, -112vh, 0); opacity: 0; }
}

.km-particles-host { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.km-particles-host i {
  position: absolute;
  bottom: -2rem;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--km-purple);
  box-shadow: 0 0 12px var(--km-purple);
  opacity: 0;
  animation: km-float-particle var(--duration) linear var(--delay) infinite;
}
.km-particles-host i:nth-child(3n) {
  background: var(--km-cyan);
  box-shadow: 0 0 12px var(--km-cyan);
}

.km-reveal, [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.km-reveal.is-visible, [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Geteilte Baseline: Fokus-Sichtbarkeit ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--km-cyan);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .km-particles-host { display: none; }
  .km-reveal, [data-reveal] { opacity: 1; transform: none; transition: none; }
}