/* Base: reset, typography, app scaffold. Theme-agnostic — tokens only. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { height: 100%; }
body {
  min-height: 100%;
  background: var(--app-bg);
  color: var(--text-primary);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; }
input, select { font: inherit; }
code, .x-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; }

:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--clr-accent-sel); }

/* App scaffold: topbar (sticky) · main (scroll) · bottom nav (fixed). */
#topbar {
  position: sticky; top: 0;
  z-index: var(--z-topbar);
  background: color-mix(in srgb, var(--app-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
#main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px 16px calc(var(--nav-h) + 56px);
}
@media (min-width: 720px) { #main { padding-left: 24px; padding-right: 24px; } }

/* Entry motion — 1:1 the webapp .ov-fade */
.x-view > * { opacity: 0; transform: translateY(12px); animation: xFade .5s cubic-bezier(.2,.7,.3,1) forwards; }
.x-view > *:nth-child(2) { animation-delay: .05s; }
.x-view > *:nth-child(3) { animation-delay: .1s; }
.x-view > *:nth-child(4) { animation-delay: .15s; }
.x-view > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes xFade { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .x-view > * { animation: none; opacity: 1; transform: none; }
}

.x-loading { min-height: 40vh; }

/* Wordmark: bold X, LUX light (memory xlux-wortmarke-x-fett). */
.brand-word { font-weight: 350; letter-spacing: .02em; }
.brand-word b { font-weight: 800; }
.brand-logo {
  display: inline-block; width: 26px; height: 26px; background: currentColor;
  -webkit-mask: url(../assets/logo.svg) no-repeat center / contain;
          mask: url(../assets/logo.svg) no-repeat center / contain;
}

/* Icons: sized via CSS only. */
.lucide { width: 20px; height: 20px; stroke: currentColor; flex-shrink: 0; }

/* Quiet helpers */
.x-quiet { color: var(--text-muted); font-size: 13.5px; }