// ────────────────────────────────────────────────────────────────
// Foundation · Base
//
// Grundflaeche: die dunkle "Konsole" (Radial-Glows + feines Raster).
// Abschaltbar ueber `body.plain` fuer Flaechen, die neutral sein sollen.
// Nur die Flaeche — Layout (Layouts/) und Typo-Details (typography) folgen.
// ────────────────────────────────────────────────────────────────

body {
  background:
    radial-gradient(60vmin 60vmin at 50% 34%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(34vmin 34vmin at 50% 74%, color-mix(in srgb, var(--ember) 9%, transparent), transparent 72%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

// Feines Raster, zum Rand hin ausgeblendet.
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  background-image:
    linear-gradient(color-mix(in srgb, var(--dim) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--dim) 5%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(72vmax 72vmax at 50% 38%, #000 28%, transparent 78%);
  mask-image: radial-gradient(72vmax 72vmax at 50% 38%, #000 28%, transparent 78%);
  pointer-events: none;
}

body.plain {
  background: var(--bg);
}

body.plain::before {
  display: none;
}

// Nur das Glühen weg, das Raster bleibt. Fuer Flaechen, die den Grund tragen,
// aber nicht angestrahlt werden sollen — die Anmeldung etwa, wo die zwei
// Lichtkreise sonst hinter einem Formular stehen, das sie nicht fuellt.
body.no-glow {
  background: var(--bg);
}

// ── Scrollbar ───────────────────────────────────────────────────
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: content-box;
}

// ── Auswahl ─────────────────────────────────────────────────────
::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--fg);
}