/* shared/site.css — Synthetic Olaf Studios
 *
 * Structural tokens ONLY: spacing, radius, sizing, motion. No color
 * beyond the fallback palette at the bottom, which every module's own
 * skin.css (see cookbook/, worlds/greyveil/, etc.) is expected to
 * override with --bg / --text / --accent of its own. Don't add palette
 * decisions here — that's what makes one module reskin without touching
 * the others.
 */

:root {
  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* structure */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --topbar-height: 56px;
  --sidebar-width: 280px;
  --content-max-width: 72rem;

  /* motion */
  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 400ms ease;

  /* type — structural pairing only; module skins may override the
     actual font-family values, not the roles */
  --font-body: system-ui, -apple-system, sans-serif;
  --font-display: var(--font-body);

  /* fallback palette — every value here should get overridden by a
     module skin.css; these exist so an unskinned page never breaks */
  --bg: #0a0d12;
  --bg-raised: #12161d;
  --text: #e8ecf1;
  --text-dim: #9aa4b2;
  --accent: #d4af37;
  --accent-contrast: #0a0d12;
  --border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* ---- Global top bar shell ----
 * Module skins should only touch the color tokens above, never these
 * rules — this is the "same everywhere" part of the nav.
 */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  z-index: 100;
}
.topbar.solid {
  background: var(--bg-raised);
  box-shadow: 0 1px 0 var(--border);
}
/* "ghost" = used on the home splash: dim until hovered/focused, since
   the home page doesn't scroll (overflow:hidden), so a scroll-triggered
   reveal wouldn't fire. Never fully invisible — opacity 0 made it
   undiscoverable on touch devices, which have no :hover at all. If home
   ever becomes scrollable, swap this for a scroll-position toggle
   instead. */
.topbar.ghost {
  background: transparent;
  opacity: 0.4;
  transition: opacity var(--transition-base);
}
.topbar.ghost:hover,
.topbar.ghost:focus-within {
  opacity: 1;
}
.topbar-brand {
  font-family: var(--font-display);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.topbar-links {
  display: flex;
  gap: var(--space-4);
}
.topbar-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.topbar-links a:hover,
.topbar-links a.active {
  color: var(--accent);
}

/* ---- Breadcrumb shell ----
 * margin-top clears the fixed topbar above it — the breadcrumb is meant
 * to sit directly under #topbar-mount in the DOM on every hand-built
 * page that uses it.
 */
.breadcrumb {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--topbar-height);
}
.breadcrumb a {
  color: var(--text-dim);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.5; }