@layer base, components, utilities;

@import url("./moonverse-tokens.css") layer(base);
@import url("./index-Bz-C05ba.css") layer(components);
@import url("./lunaria-quality.css") layer(components);
@import url("./moonverse-design.css") layer(components);
@import url("./moonverse-compact.css") layer(components);
@import url("./moonverse-story.css") layer(components);
@import url("./moonverse-polish.css") layer(components);
@import url("./moonverse-conversation.css") layer(components);
@import url("./moonverse-chapters.css") layer(components);
@import url("./moonverse-reader.css") layer(components);
@import url("./moonverse-explore.css") layer(components);
@import url("./moonverse-discover.css") layer(components);
@import url("./moonverse-profile.css") layer(components);
@import url("./moonverse-cosmetics.css") layer(components);
@import url("./moonverse-account.css") layer(components);
@import url("./moonverse-navigation.css") layer(components);
@import url("./moonverse-reactions.css") layer(components);
@import url("./moonverse-search.css") layer(components);
@import url("./moonverse-aesthetic.css") layer(components);
@import url("./moonverse-library.css") layer(components);
@import url("./moonverse-depth.css") layer(components);
@import url("./moonverse-modern-subtle.css") layer(utilities);

/* =====================================================================
   Moonverse — Core Layout & WordPress Scaffolding Layer
   ===================================================================== */

@layer base {
  body,
  .mv-app {
    background: var(--mv-bg-base, #111620);
    color: var(--mv-text-primary, #f1f5f9);
    font-family: var(--mv-font-sans, 'Inter', system-ui, sans-serif);
    line-height: 1.6;
    margin: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  img { max-width: 100%; height: auto; }
  a { color: var(--mv-accent-lavender, #8c82ff); text-decoration: none; }
  a:hover, a:focus-visible { text-decoration: underline; }

  .mv-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--mv-bg-elevated, #1f2737);
    color: var(--mv-text-primary, #f1f5f9);
    padding: 0.6rem 1rem;
    z-index: 100;
  }
  .mv-skip-link:focus { left: 0; }

  .mv-wrap { max-width: var(--mv-max-width, 1280px); margin-inline: auto; padding: 0 1.25rem; }
  .mv-narrow { max-width: 740px; }
  .mv-wide { max-width: 1440px; }
}

@layer components {
  /* Site Header */
  .mv-header {
    background: color-mix(in srgb, var(--mv-bg-surface, #161c28) 88%, transparent);
    border-bottom: 1px solid var(--mv-border-subtle, rgba(255, 255, 255, 0.08));
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .mv-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding-block: 0.5rem;
  }
  .mv-header__brand { display: flex; align-items: center; gap: 0.75rem; }
  .mv-header__title {
    color: var(--mv-text-primary, #f1f5f9);
    font-family: var(--mv-font-display, 'Cinzel', serif);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
  }
  .mv-header__title:hover { text-decoration: none; }
  .mv-header__description { color: var(--mv-text-muted, #94a3b8); font-size: 0.8rem; }

  .mv-nav__list,
  .mv-footer__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mv-nav__list a,
  .mv-footer__list a {
    color: var(--mv-text-secondary, #94a3b8);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.15s ease;
  }
  .mv-nav__list a:hover,
  .mv-footer__list a:hover {
    color: var(--mv-accent-amber, #fbbf24);
    text-decoration: none;
  }

  /* Site Footer */
  .mv-footer {
    border-top: 1px solid var(--mv-border-subtle, rgba(255, 255, 255, 0.08));
    background: var(--mv-bg-surface, #161c28);
    margin-top: 4rem;
    padding: 3rem 0 2rem;
  }
  .mv-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  .mv-footer__meta {
    font-size: 0.85rem;
    color: var(--mv-text-muted, #64748b);
    margin: 0;
  }

  /* WordPress Content Standards */
  .alignwide {
    width: 100vw;
    max-width: 1200px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-inline: auto;
  }
  .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
  }
}