/*
 * WWM Ink Wash Scroll Theme
 * -------------------------
 * Scoped theme for the Where Winds Meet (WWM) Story & Lore Tracker section.
 * Inspired by the official WWM website: warm rice-paper scroll background,
 * bronze/gold accents, Chinese ink wash painting (shuǐmò) aesthetic.
 *
 * All styles scoped under `.wwm-layout` — will not leak into V7 Light Pink
 * HUD or MH parchment themes.
 *
 * DESIGN TOKENS
 *
 *   Scroll surface (warm paper)
 *     --wwm-bg              #f0ece4   primary page background
 *     --wwm-bg-panel        #f5f1ea   card / panel surface
 *     --wwm-bg-warm         #ede7db   footer, inset areas
 *     --wwm-bg-dark         #e4ddd1   hover / pressed surface
 *
 *   Ink tones
 *     --wwm-ink-deep        #1a1a1e   primary text, headings
 *     --wwm-ink-medium      #2d2b2a   secondary text
 *     --wwm-ink-soft        #4a4543   body text
 *     --wwm-ink-wash        #7a7370   muted text, excerpts
 *     --wwm-ink-mist        #a09890   subtle text, dates
 *
 *   Bronze accent (warm, earthy gold)
 *     --wwm-bronze          #b8935e   primary accent
 *     --wwm-bronze-bright   #c9a46a   highlights, active states
 *     --wwm-bronze-muted    #9a7d50   dividers, subtle borders
 *     --wwm-bronze-pale     #d4c4a0   faint decorations
 *     --wwm-bronze-glow     rgba(184, 147, 94, 0.12)  hover glow
 *
 *   Semantic accents
 *     --wwm-vermillion      #c0392b   spoiler badges, alerts
 *     --wwm-jade            #2e7d68   faction tags, bio headings
 *
 *   Typography
 *     --wwm-font-display    Cinzel              page titles, h1-h2
 *     --wwm-font-serif      Cormorant Garamond  elegant body, hero tagline
 *     --wwm-font-body       Noto Sans SC        standard body
 *     --wwm-font-mono       Share Tech Mono     tags, labels, dates
 */

/* ---------- Font declarations -------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Share+Tech+Mono&display=swap');

/* ---------- Theme root (scoped) ----------------------------------------- */
.wwm-layout {
    /* Scroll surface */
    --wwm-bg: #f0ece4;
    --wwm-bg-panel: #f5f1ea;
    --wwm-bg-warm: #ede7db;
    --wwm-bg-dark: #e4ddd1;

    /* Ink tones */
    --wwm-ink-deep: #1a1a1e;
    --wwm-ink-medium: #2d2b2a;
    --wwm-ink-soft: #4a4543;
    --wwm-ink-wash: #635c56;
    --wwm-ink-mist: #847b72;

    /* Bronze accent */
    --wwm-bronze: #8c6d3f;
    --wwm-bronze-bright: #a07d48;
    --wwm-bronze-muted: #7a6238;
    --wwm-bronze-pale: #d4c4a0;
    --wwm-bronze-glow: rgba(184, 147, 94, 0.12);

    /* Semantic accents */
    --wwm-vermillion: #c0392b;
    --wwm-vermillion-muted: #9c3848;
    --wwm-jade: #2e7d68;
    --wwm-jade-muted: #3e8c80;

    /* Navbar (dark) */
    --wwm-nav-bg: rgba(26, 26, 30, 0.92);
    --wwm-nav-text: rgba(240, 236, 228, 0.7);

    /* ── Backward-compat aliases (old token names → new values) ── */
    --wwm-rice-paper: var(--wwm-bg);
    --wwm-rice-paper-dark: var(--wwm-bg-warm);
    --wwm-rice-paper-light: var(--wwm-bg-panel);
    --wwm-ink-black: var(--wwm-ink-deep);
    --wwm-gold: var(--wwm-bronze);
    --wwm-gold-muted: var(--wwm-bronze-muted);

    /* ── Semantic tokens (consumed by components) ── */
    --wwm-text: var(--wwm-ink-deep);
    --wwm-text-muted: var(--wwm-ink-soft);
    --wwm-text-subtle: var(--wwm-ink-mist);
    --wwm-border: rgba(160, 152, 144, 0.2);
    --wwm-border-strong: var(--wwm-ink-wash);
    --wwm-accent: var(--wwm-bronze);
    --wwm-accent-secondary: var(--wwm-jade);
    --wwm-accent-tertiary: var(--wwm-bronze-bright);

    /* Typography */
    --wwm-font-display: 'Cinzel', 'Noto Serif SC', serif;
    --wwm-font-serif: 'Cormorant Garamond', 'Noto Serif SC', serif;
    --wwm-font-body: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
    --wwm-font-mono: 'Share Tech Mono', 'Courier New', monospace;

    color-scheme: light;
    color: var(--wwm-ink-soft);
    background-color: var(--wwm-bg);
    font-family: var(--wwm-font-body);
    font-size: 15px;
    line-height: 1.65;
}

/* Subtle paper grain texture */
.wwm-layout::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px;
}

/* ---------- Headings ----------------------------------------------------- */
.wwm-layout .wwm-heading-1,
.wwm-layout .wwm-heading-2,
.wwm-layout .wwm-heading-3,
.wwm-layout .wwm-heading-4 {
    font-family: var(--wwm-font-display);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.25;
    margin: 0;
}

.wwm-layout .wwm-heading-1 {
    font-size: clamp(24px, 4vw, 40px);
    color: var(--wwm-ink-deep);
}

.wwm-layout .wwm-heading-2 {
    font-size: clamp(20px, 2.6vw, 28px);
    color: var(--wwm-ink-deep);
}

.wwm-layout .wwm-heading-3 {
    font-size: clamp(16px, 2vw, 20px);
    color: var(--wwm-ink-deep);
    font-weight: 600;
}

.wwm-layout .wwm-heading-4 {
    font-size: 16px;
    color: var(--wwm-ink-medium);
}

/* Mono uppercase eyebrow label */
.wwm-layout .wwm-eyebrow {
    font-family: var(--wwm-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wwm-bronze-muted);
}

/* ---------- Panel: warm paper card with clean border -------------------- */
.wwm-layout .wwm-panel {
    position: relative;
    background-color: var(--wwm-bg-panel);
    border: 1px solid var(--wwm-border);
    padding: 24px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wwm-layout .wwm-panel:hover {
    border-color: rgba(184, 147, 94, 0.25);
}

/* ---------- Divider: gold gradient line --------------------------------- */
.wwm-layout .wwm-divider {
    display: block;
    width: 100%;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent 5%, var(--wwm-bronze-muted) 30%, var(--wwm-bronze-muted) 70%, transparent 95%);
    margin: 28px 0;
    opacity: 0.6;
}

/* Short divider variant */
.wwm-layout .wwm-divider--short {
    width: 48px;
    background: var(--wwm-bronze);
    opacity: 1;
}

/* ---------- Tag / chip -------------------------------------------------- */
.wwm-layout .wwm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--wwm-font-mono);
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border: 1px solid rgba(184, 147, 94, 0.3);
    background-color: transparent;
    color: var(--wwm-bronze);
}

.wwm-layout .wwm-tag--accent {
    border-color: rgba(184, 147, 94, 0.4);
    color: var(--wwm-bronze);
}

.wwm-layout .wwm-tag--jade {
    border-color: rgba(46, 125, 104, 0.35);
    color: var(--wwm-jade);
}

.wwm-layout .wwm-tag--gold {
    border-color: rgba(184, 147, 94, 0.3);
    color: var(--wwm-bronze-muted);
}

/* ---------- Button ------------------------------------------------------ */
.wwm-layout .wwm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--wwm-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 10px 20px;
    border: 1px solid var(--wwm-bronze-muted);
    background-color: transparent;
    color: var(--wwm-ink-soft);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.wwm-layout .wwm-button:hover,
.wwm-layout .wwm-button:focus-visible {
    border-color: var(--wwm-bronze);
    color: var(--wwm-bronze);
    background: var(--wwm-bronze-glow);
}

.wwm-layout .wwm-button--primary {
    background-color: var(--wwm-bronze);
    border-color: var(--wwm-bronze);
    color: var(--wwm-bg);
    font-weight: 500;
}
.wwm-layout .wwm-button--primary:hover,
.wwm-layout .wwm-button--primary:focus-visible {
    background-color: var(--wwm-bronze-bright);
    border-color: var(--wwm-bronze-bright);
    color: var(--wwm-ink-deep);
}

.wwm-layout .wwm-button--ghost {
    background-color: transparent;
    border-color: rgba(160, 152, 144, 0.25);
    color: var(--wwm-ink-wash);
}
.wwm-layout .wwm-button--ghost:hover,
.wwm-layout .wwm-button--ghost:focus-visible {
    border-color: var(--wwm-bronze-muted);
    color: var(--wwm-bronze);
    background: var(--wwm-bronze-glow);
}

/* ---------- Links ------------------------------------------------------- */
/* Default: no underline. A global underline rule only worked in the old Vue
   stack because scoped card/nav CSS overrode it; in plain ERB, .wwm-layout a (0,1,1) beat
   single-class card rules (0,1,0) and underlined every card, tag, and crumb. */
.wwm-layout a {
    color: var(--wwm-bronze);
    text-decoration: none;
}
.wwm-layout a:hover,
.wwm-layout a:focus-visible {
    color: var(--wwm-bronze-bright);
}

.wwm-layout .wwm-navbar a.wwm-nav-link--active:hover,
.wwm-layout .wwm-navbar a.wwm-nav-link--active:focus-visible {
    color: var(--wwm-bronze-bright, #c9a46a);
}

/* ---------- Focus ring (accessibility) ---------------------------------- */
.wwm-layout :focus-visible {
    outline: 2px solid var(--wwm-bronze);
    outline-offset: 2px;
}

/* ---------- Scroll background (long-form pages) ------------------------- */
.wwm-layout .wwm-scroll-bg {
    background-color: var(--wwm-bg-panel);
    padding: 32px;
    border-left: 1px solid var(--wwm-border);
    border-right: 1px solid var(--wwm-border);
}

/* ---------- Mobile ------------------------------------------------------ */
@media (max-width: 640px) {
    .wwm-layout .wwm-panel {
        padding: 16px;
    }
    .wwm-layout .wwm-scroll-bg {
        padding: 20px;
    }
}