/* ============================================
   Cosmic canvas — overrides the cream theme
   variables in styles.css so every component
   flips to a unified dark cosmic look.
   Loaded AFTER styles.css and AFTER landing-premium.css.
   ============================================ */

html { background: #0a0b11; }

/* ---- Token flip: redefine the cream theme as cosmic ---- */
:root {
  /* Backgrounds — cosmic dark instead of cream */
  --bg: transparent;                          /* let body pseudo-element show through */
  --bg-soft: rgba(255, 255, 255, 0.03);       /* subtle alt section */
  --bg-card: rgba(255, 255, 255, 0.04);       /* card surface */
  --bg-elevated: rgba(255, 255, 255, 0.06);   /* elevated card */
  --bg-deep: rgba(0, 0, 0, 0.35);             /* deep section */

  /* Text — cream + warm whites instead of warm black */
  --ink: #f1e7d1;                             /* primary text */
  --ink-bright: #ffffff;
  --ink-soft: #ece1c8;
  --ink-secondary: rgba(241, 231, 209, 0.78);
  --ink-muted: rgba(241, 231, 209, 0.55);
  --ink-faint: rgba(241, 231, 209, 0.35);

  /* Hairlines — light on dark */
  --line-faint: rgba(241, 231, 209, 0.08);
  --line-soft: rgba(241, 231, 209, 0.16);
  --line-strong: rgba(241, 231, 209, 0.32);
  --line-ink: rgba(241, 231, 209, 0.5);

  /* Brand accent — purple (NOT red). Token kept named --plum for backward compat with existing markup. */
  --plum: #8b5cf6;
  --plum-bright: #b39afa;
  --plum-deep: #6d28d9;
  --plum-glow: rgba(139, 92, 246, 0.42);
  --gold: #d4b27a;
  --gold-bright: #e8c994;
  --gold-deep: #a8841e;
}

body {
  background: #0a0b11 !important;
  color: var(--ink) !important;
  position: relative;
}

/* Cosmic background lives on a fixed pseudo-element (no fixed-attachment flicker on iOS) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    url('/stars.svg'),
    radial-gradient(ellipse 90% 60% at 70% 10%, rgba(139, 92, 246, 0.16), transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 90%, rgba(70, 50, 140, 0.18), transparent 50%),
    linear-gradient(175deg, #1c1e29 0%, #14161f 40%, #0a0b11 100%);
  background-size: cover, auto, auto, auto;
  background-position: center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 4px 4px;
  opacity: 0.5;
}

/* ============================================
   .cosmos overlay — unify across all pages.
   partials.js injects <div class="cosmos"> on every
   page. Both stylesheets define .cosmos differently;
   we force a single neutral state.
   ============================================ */
.cosmos {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: none !important;
  animation: none !important;
  opacity: 0 !important;
}
.cosmos::before,
.cosmos::after {
  content: none !important;
  display: none !important;
}

/* ============================================
   Nav — unified dark across all pages
   ============================================ */
.nav {
  background: rgba(16, 13, 10, 0.78) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 178, 122, 0.08);
}
.nav-brand,
.nav-brand span,
.nav-brand:link,
.nav-brand:visited { color: #f1e7d1 !important; }
.nav-glyph { color: #d4b27a !important; }
.nav-links a,
.nav-links a:link,
.nav-links a:visited { color: rgba(241, 231, 209, 0.78) !important; }
.nav-links a:hover,
.nav-links a:focus,
.nav-links a.is-active { color: #d4b27a !important; }
.nav-toggle span { background: #f1e7d1 !important; }

@media (max-width: 880px) {
  .nav-links {
    background: rgba(10, 11, 17, 0.96) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  .nav-links a,
  .nav-links a:link,
  .nav-links a:visited { color: #f1e7d1 !important; }
  .nav-links a:hover,
  .nav-links a.is-active { color: #d4b27a !important; }
}

/* ============================================
   Footer — cosmic-friendly
   ============================================ */
.footer {
  background: rgba(10, 11, 17, 0.6) !important;
  border-top: 1px solid rgba(212, 178, 122, 0.12);
  color: rgba(241, 231, 209, 0.75) !important;
}
.footer a,
.footer a:link,
.footer a:visited { color: rgba(241, 231, 209, 0.6) !important; }
.footer a:hover { color: #d4b27a !important; }
.foot-glyph { color: rgba(212, 178, 122, 0.7) !important; }
.foot-name { color: #f1e7d1 !important; }

/* ============================================
   Cards & sections — give them subtle dark surfaces
   so cream-themed components look right on cosmos
   ============================================ */
.section-feature,
.section-inner,
.bio-hero,
.lib-card,
.lib-card-feature,
.book-grid,
.cover-frame-wrap,
.cover-frame,
.story-grid,
.story-side,
.story-content,
.bundle,
.bundle-pricing,
.quotes-grid,
.quote-band,
.signup-form,
.strip-grid,
.checkout-card,
.book-mockup {
  /* These sections inherit transparent backgrounds —
     no override needed except text colors below */
}

/* Force readable text everywhere on cream pages */
main,
main p,
main h1, main h2, main h3, main h4, main h5, main h6,
.bio-hero p,
.section-feature p,
.section-inner p,
.story-content p,
.lib-card p,
.quote-text,
.quote-attr,
.module-desc,
.module-meta,
.hero-tagline,
.hero-byline,
.hero-eyebrow,
.section-sub,
.signup-form p,
.signup-form label,
.bundle-pricing,
.bundle-savings,
.foot-tag,
.foot-rights,
li {
  color: var(--ink) !important;
}

/* Soft text colors */
.hero-tagline,
.section-sub,
.module-desc,
.story-content p,
.bio-hero p,
.foot-tag {
  color: var(--ink-secondary) !important;
}

.hero-eyebrow,
.module-meta,
.foot-rights {
  color: var(--ink-muted) !important;
}

/* Cards on cream pages — give them visible surfaces against cosmos */
.lib-card,
.lib-card-feature,
.checkout-card,
.bundle,
.signup-form,
.quote-band,
.book-mockup {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(241, 231, 209, 0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Buttons — keep them readable */
.btn,
.btn-primary {
  color: #0a0b11 !important;
  background: #d4b27a !important;
  border: none !important;
}
.btn-primary:hover { background: #e8c994 !important; }
.btn-ghost {
  background: transparent !important;
  color: #f1e7d1 !important;
  border: 1px solid rgba(241, 231, 209, 0.3) !important;
}
.btn-ghost:hover {
  background: rgba(241, 231, 209, 0.05) !important;
  border-color: rgba(241, 231, 209, 0.5) !important;
}

/* Form inputs */
input[type="email"],
input[type="text"],
textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(241, 231, 209, 0.18) !important;
  color: #f1e7d1 !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(241, 231, 209, 0.4) !important;
}

/* SVG icons within content (cover art, glyphs) — make them visible on dark */
.cover-art,
.cover-frame svg {
  color: #f1e7d1 !important;
}