/* ============================================================
    ToonNovel — Shared site stylesheet (Phase 4 extraction)
    Cached via .htaccess (ExpiresByType text/css access plus 1 week).
    Contains: reset, design tokens (both naming schemes), nav (app + static).
    Page-specific component CSS stays inline in each page's <style>.
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.5; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ── Canonical design tokens ───────────────────────────────── */
:root {
  /* Backgrounds (rich app pages use --bg/--bg2/.../--card; static pages use --bg/--bg2/--bg3) */
  --bg:   #0f0a1e;
  --bg1:  #140d28;
  --bg2:  #1a1133;
  --bg3:  #20153e;
  --bg4:  #271a4a;
  --card: #180e30;

  /* Violet — single source of truth */
  --v:       #7c5cfc;   /* primary */
  --v2:      #a78bfa;   /* light */
  --v3:      #5535d4;   /* dark */
  --violet:  #7c5cfc;   /* alias used by static pages */
  --violet2: #a78bfa;

  /* Gold */
  --gold:  #f0b429;
  --gold2: #fde68a;

  /* Semantic */
  --rose:  #f43f5e;
  --teal:  #2dd4bf;
  --green: #4acd88;

  /* Text */
  --tx:     #ffffff;
  --text:   #f0f0fa;     /* alias used by static pages */
  --muted:  #b8b0d8;
  --muted2: #d8d2f0;

  /* Borders */
  --bd:      rgba(124,92,252,.18);
  --bd2:     rgba(255,255,255,.07);
  --border:  rgba(124,92,252,.15);
  --border2: rgba(255,255,255,.07);

  /* Layout */
  --r: 12px;
}

/* ── Nav: rich app variant (rankings / lists / list / author) ── */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(15,10,30,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bd); }
.nav-in { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.25rem; color: var(--tx); display: flex; align-items: center; gap: 8px; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 18px; align-items: center; font-size: .9rem; }
.nav-links a { color: var(--muted); transition: color .15s; }
.nav-links a:hover, .nav-links a.on { color: var(--tx); }
.nav-coins { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(240,180,41,.12); border: 1px solid rgba(240,180,41,.3); border-radius: 999px; color: var(--gold); font-weight: 700; font-size: .82rem; }
.nav-coins:hover { background: rgba(240,180,41,.18); }

/* ── Nav: static-page variant (about / contact / privacy / terms / dmca) ── */
.nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.nav-logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #7c5cfc, #a855f7); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.nav-logo-name { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 900; background: linear-gradient(135deg, #a78bfa, #f0b429); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav-link { padding: 6px 4px; color: var(--muted2, var(--muted)); font-size: .88rem; font-weight: 600; text-decoration: none; transition: color .15s; }
.nav-link:hover { color: var(--text, var(--tx)); }

/* Static page <nav> sometimes uses 60px sticky height + 5vw padding, override via page rules if needed */
@media (max-width: 640px) {
  .nav-link:not(.always) { display: none; }
}
@media (max-width: 720px) {
  .nav-links a:not(.brand,.nav-coins) { display: none; }
}