@import "tailwindcss";

@theme {
  --color-ink: #08080c;
  --color-gold: #c9a227;
  --color-gold-bright: #e8c554;
  --color-fog: #b9c0cc;
  --color-paper: #f5f4f1;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

html {
  -webkit-tap-highlight-color: transparent;
}

/* Pure-CSS hero shown only when WebGL is unavailable */
.gl-fallback {
  display: none;
}
.no-webgl .gl-fallback {
  display: block;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(80, 95, 130, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 80%, rgba(201, 162, 39, 0.12), transparent 65%),
    var(--color-ink);
}
.no-webgl canvas {
  display: none;
}

/* Corner nav shared by all variant pages */
.variant-nav {
  position: fixed;
  bottom: 1.25rem;
  right: 1.5rem;
  z-index: 30;
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.variant-nav a {
  opacity: 0.45;
  transition: opacity 0.2s;
}
.variant-nav a:hover,
.variant-nav a[aria-current="page"] {
  opacity: 1;
}