/*
 * Muugart — homepage identity layer, built on Threshold's canonical tokens.
 * Per doctrine/design/00a-canonical-base.md rule 2: colours are the only
 * default deviation. Everything else (spacing, radii, type scale, motion)
 * inherits tokens.css verbatim. Deliberately self-contained (does not
 * load book.css) so this page has no dependency on the reading site's
 * chrome — but it reuses the exact same warm-ink / amber identity so the
 * two feel like one property, not a hand-off between two different sites.
 */

:root {
  --mg-bg:          var(--thx-color-white);
  --mg-bg-warm:     #faf7f2;
  --mg-text:        var(--thx-color-grey-222);
  --mg-text-muted:  var(--thx-color-grey-666);
  --mg-surface:     var(--thx-color-grey-eee);
  --mg-divider:     var(--thx-color-grey-ddd);
  --mg-accent:      var(--thx-color-orange-500);
  --mg-accent-hover: var(--thx-color-orange-600);

  --mg-header-h: 60px;
  --mg-footer-h: 64px;

  --mg-rainbow: linear-gradient(90deg,
    var(--thx-color-crimson) 0%,
    var(--thx-color-orange-500) 20%,
    var(--thx-color-yellow-500) 40%,
    var(--thx-color-green-500) 60%,
    var(--thx-color-lapis) 80%,
    var(--thx-color-purple-500) 100%);
}

:root[data-theme="dark"] {
  --mg-bg:          #14110d;
  --mg-bg-warm:     #1a1611;
  --mg-text:        #ece7de;
  --mg-text-muted:  #a8a094;
  --mg-surface:     #201b15;
  --mg-divider:     #33291f;
  --mg-accent:      var(--thx-color-orange-400);
  --mg-accent-hover: var(--thx-color-orange-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mg-bg:          #14110d;
    --mg-bg-warm:     #1a1611;
    --mg-text:        #ece7de;
    --mg-text-muted:  #a8a094;
    --mg-surface:     #201b15;
    --mg-divider:     #33291f;
    --mg-accent:      var(--thx-color-orange-400);
    --mg-accent-hover: var(--thx-color-orange-300);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--mg-bg-warm);
  color: var(--mg-text);
  font-family: var(--thx-font-body);
  font-size: var(--thx-fs-body);
  line-height: var(--thx-lh-body);
  scrollbar-width: thin;
  scrollbar-color: var(--mg-accent) var(--mg-bg-warm);
}

a { color: var(--mg-accent); text-decoration: none; }
a:hover { color: var(--mg-accent-hover); text-decoration: underline; }

/* ─── header + footer ────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--mg-header-h);
  display: flex; align-items: center; gap: var(--thx-space-5);
  padding-inline: clamp(24px, 5vw, 64px);
  background: var(--mg-bg);
  box-shadow: var(--thx-shadow-dropdown);
  z-index: 90;
}
.home-nav-link { margin-left: auto; font-size: var(--thx-fs-small); color: var(--mg-text-muted) !important; }
.home-nav-link:hover { color: var(--mg-accent) !important; }
.site-header-title {
  font-family: var(--thx-font-headline);
  font-weight: var(--thx-fw-semibold);
  font-size: var(--thx-fs-h4);
  color: var(--mg-text) !important;
}
.site-header-title:hover { color: var(--mg-accent) !important; text-decoration: none; }

.theme-toggle {
  font-family: var(--thx-font-body);
  font-size: var(--thx-fs-small);
  color: var(--mg-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--thx-space-2) var(--thx-space-3);
  border-radius: var(--thx-radius-card-sm);
}
.theme-toggle:hover { background: var(--mg-surface); color: var(--mg-text); }

.site-footer {
  min-height: var(--mg-footer-h);
  display: flex; align-items: center; justify-content: center;
  padding: var(--thx-space-3) clamp(24px, 5vw, 64px);
  background: var(--mg-bg);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
  color: var(--mg-text-muted); font-size: var(--thx-fs-small);
  text-align: center;
}
.site-footer p { margin: 0; }

/* ─── home / catalogue ───────────────────────────────────────────── */
.home-body { background: var(--mg-bg-warm); }
.home {
  max-width: 1040px; margin: 0 auto;
  padding: calc(var(--mg-header-h) + var(--thx-space-9)) var(--thx-space-6) calc(var(--mg-footer-h) + var(--thx-space-9));
  text-align: center;
}
.home-rule { height: 4px; width: 96px; margin: 0 auto var(--thx-space-6); background: var(--mg-rainbow); border-radius: var(--thx-radius-pill); }
.home-eyebrow { color: var(--mg-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--thx-fs-meta); margin: 0 0 var(--thx-space-2); }
.home-title { font-family: var(--thx-font-headline); font-size: var(--thx-fs-h1); font-weight: var(--thx-fw-bold); margin: 0 0 var(--thx-space-3); }
.home-blurb { font-size: var(--thx-fs-h4); line-height: var(--thx-lh-body); margin: 0 0 var(--thx-space-8); color: var(--mg-text-muted); }

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--thx-space-6);
  text-align: left;
}

.book-card {
  display: flex;
  flex-direction: column;
  gap: var(--thx-space-3);
  color: var(--mg-text) !important;
  border-radius: var(--thx-radius-card);
  padding: var(--thx-space-4);
  background: var(--mg-bg);
  box-shadow: var(--thx-shadow-card-hover);
  transition: transform var(--thx-dur-fast) var(--thx-ease), box-shadow var(--thx-dur-fast) var(--thx-ease);
}
.book-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--thx-shadow-dropdown);
  text-decoration: none;
}

.book-cover {
  aspect-ratio: 2 / 3;
  width: 100%;
  border-radius: var(--thx-radius-image);
  overflow: hidden;
  background: var(--mg-surface);
  display: flex; align-items: center; justify-content: center;
}
.book-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.book-cover-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--thx-space-2);
  width: 100%; height: 100%;
  color: var(--mg-text-muted);
  text-align: center;
  padding: var(--thx-space-4);
}
.book-cover-placeholder .glyph {
  width: 40px; height: 40px;
  border-radius: var(--thx-radius-card-sm);
  background: var(--mg-rainbow);
  opacity: 0.35;
}
.book-cover-placeholder span.label {
  font-size: var(--thx-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.book-card-title {
  font-family: var(--thx-font-headline);
  font-weight: var(--thx-fw-semibold);
  font-size: var(--thx-fs-h4);
}

.home-empty {
  grid-column: 1 / -1;
  padding: var(--thx-space-9) var(--thx-space-6);
  color: var(--mg-text-muted);
  background: var(--mg-bg);
  border-radius: var(--thx-radius-card);
}
.home-empty p { margin: 0; text-align: center; }

/* ─── responsive ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .home-title { font-size: var(--thx-fs-h2); }
  .home-blurb { font-size: var(--thx-fs-body); }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--thx-space-4); }
}