/* ==========================================================================
   INK SKIN v2 - InkNovels "night library" redesign (ink-black + amber).
   Loads after inknovels-theme-css, so equal-specificity rules here win.
   Strategy: repaint the child theme's SOURCE variables (--ink-*), which the
   whole custom UI derives from, then patch hardcoded purples and typography.
   ========================================================================== */

/* ---------- self-hosted fonts ---------- */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-var.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-var.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-italic-var.woff2') format('woff2');
  font-weight:200 800; font-style:italic; font-display:swap;
}

/* ==========================================================================
   1. SOURCE PALETTE OVERRIDE (dark default)
   ========================================================================== */
:root{
  --ink-bg-deep:#0A0B0E;
  --ink-bg-base:#0D0E12;
  --ink-bg-surface:#14161C;
  --ink-bg-card:#15181F;
  --ink-bg-card-hover:#1B1F28;
  --ink-bg-elevated:#191C24;
  --ink-border:rgba(229,164,92,.13);
  --ink-border-hover:rgba(229,164,92,.4);
  --ink-text-primary:#ECEDEF;
  --ink-text-secondary:#9BA0AA;
  --ink-text-muted:#808795;
  --ink-primary:#E5A45C;
  --ink-primary-light:#F0B87A;
  --ink-primary-dark:#D08F45;
  --ink-accent:#E5A45C;
  --ink-gold:#E5A45C;
  --ink-glow:0 0 20px rgba(229,164,92,.14);

  /* ink-skin own tokens (iks-*) */
  --iks-on-accent:#1A1005;
  --iks-prose:#D9DBDF;
  --iks-box-bg:rgba(229,164,92,.07);
  --iks-box-line:rgba(229,164,92,.24);
  --iks-line:rgba(255,255,255,.08);
}

/* Fictioneer primaries (child hardcodes purple with !important; we load later) */
html.fictioneer-theme,
html.fictioneer-theme[data-mode="dark"]{
  --primary-400:#F0B87A !important;
  --primary-500:#E5A45C !important;
  --primary-600:#D08F45 !important;
  --secant:#E5A45C !important;
  --e-link:#F0B87A !important;
  --story-color:#E5A45C !important;
  --ff-base:'Bricolage Grotesque',-apple-system,'Segoe UI',Roboto,sans-serif !important;
  --ff-heading:'Bricolage Grotesque',-apple-system,'Segoe UI',Roboto,sans-serif !important;
}

/* ---------- light mode ---------- */
html.fictioneer-theme[data-mode="light"]{
  --ink-bg-deep:#F5F5F2;
  --ink-bg-base:#FAFAF8;
  --ink-bg-surface:#F1F1EE;
  --ink-bg-card:#FFFFFF;
  --ink-bg-card-hover:#F5F3EE;
  --ink-bg-elevated:#EFEDE8;
  --ink-border:rgba(20,22,28,.1);
  --ink-border-hover:rgba(180,115,42,.45);
  --ink-text-primary:#17181C;
  --ink-text-secondary:#5D626C;
  --ink-text-muted:#8A8F98;
  --ink-primary:#B4732A;
  --ink-primary-light:#C98336;
  --ink-primary-dark:#96601F;
  --ink-accent:#B4732A;
  --ink-gold:#B4732A;
  --ink-glow:none;
  --iks-on-accent:#FFFFFF;
  --iks-prose:#26282E;
  --iks-box-bg:rgba(180,115,42,.06);
  --iks-box-line:rgba(180,115,42,.28);
  --iks-line:rgba(20,22,28,.09);
  --primary-400:#C98336 !important;
  --primary-500:#B4732A !important;
  --primary-600:#96601F !important;
  --secant:#B4732A !important;
  --e-link:#96601F !important;
  --story-color:#B4732A !important;
}

/* ==========================================================================
   2. GROUND: kill the galaxy, calm typography base
   ========================================================================== */
body{
  background:var(--ink-bg-base) !important;
  background-image:none !important;
  font-family:'Bricolage Grotesque',-apple-system,'Segoe UI',Roboto,sans-serif !important;
  letter-spacing:-0.008em;
}
html.fictioneer-theme[data-mode="dark"] body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55% 38% at 50% -4%, rgba(229,164,92,.055), transparent 70%);
}
.main__background{ background:none !important; box-shadow:none !important; }

/* ==========================================================================
   3. PATCH HARDCODED PURPLES / CONTRAST
   ========================================================================== */
/* primary button: dark-on-amber, not white-on-amber */
#site a.ink-btn.ink-btn--primary,
#site .ink-btn--primary,
body .ink-btn--primary,
.ink-btn.ink-btn--primary{
  color:var(--iks-on-accent) !important;
  -webkit-text-fill-color:var(--iks-on-accent) !important;
  border-radius:999px !important;
}
.ink-btn{ border-radius:999px !important; }
/* story action buttons (Read Later / Follow) are amber-filled secondary
   buttons; Fictioneer paints their label white -> dark-on-amber for contrast */
.button._secondary.button-read-later-notice,
.button._secondary.button-read-later,
.button._secondary.button-follow-login-notice,
.button._secondary.button-follow{
  color:var(--iks-on-accent) !important;
  -webkit-text-fill-color:var(--iks-on-accent) !important;
}
html.fictioneer-theme[data-mode="light"] .button._secondary.button-read-later-notice,
html.fictioneer-theme[data-mode="light"] .button._secondary.button-read-later,
html.fictioneer-theme[data-mode="light"] .button._secondary.button-follow-login-notice,
html.fictioneer-theme[data-mode="light"] .button._secondary.button-follow{
  background-image:linear-gradient(135deg,#96601F,#7A4E18) !important;
}
/* taxonomy pills: faint purple bg/border leftover -> amber tint (skip warnings) */
.tag-pill:not(._warning){
  background:rgba(229,164,92,.10) !important;
  border-color:rgba(229,164,92,.28) !important;
}
.menu-item-has-children > .sub-menu{
  border-color:var(--ink-border) !important;
  background:rgba(16,18,24,.96) !important;
}
html.fictioneer-theme[data-mode="light"] .menu-item-has-children > .sub-menu{
  background:rgba(250,250,248,.97) !important;
}

/* gradient / gold text leftovers -> amber */
.ink-stat-num{
  background:none !important;
  color:var(--ink-primary) !important;
  -webkit-text-fill-color:var(--ink-primary) !important;
  font-family:var(--ff-heading) !important;
  letter-spacing:-.03em !important;
}
.ink-stat-label{ color:var(--ink-text-muted) !important; }

/* ==========================================================================
   4. HOME COMPONENTS (real classes)
   ========================================================================== */
.ink-slide-title, .ink-section-title, .ink-rank-title, .ink-card-title{
  font-family:var(--ff-heading) !important;
  letter-spacing:-.02em !important;
}
.ink-slide-desc{
  font-family:'Newsreader',serif !important;
  font-size:1.06em !important;
  color:var(--ink-text-secondary) !important;
}
.ink-card, .ink-rank-card{
  transition:transform .45s cubic-bezier(0.32,0.72,0,1), border-color .45s cubic-bezier(0.32,0.72,0,1), background .45s cubic-bezier(0.32,0.72,0,1) !important;
}
.ink-card:hover{ transform:translateY(-4px); }

/* ==========================================================================
   5. CHAPTER READER
   ========================================================================== */
.chapter__title{
  font-family:'Newsreader',serif !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
}
.chapter__content{
  font-family:'Newsreader',serif;
  font-size:19.5px; line-height:1.78;
  color:var(--iks-prose);
  max-width:720px; margin-inline:auto;
}
.chapter__content p{ margin-bottom:1.4em; }
.chapter-formatting > p:first-of-type::first-letter,
.chapter__content > p:first-of-type::first-letter{
  font-size:3.3em; float:left; line-height:.86; padding-right:12px;
  color:var(--ink-primary); font-weight:500;
}
.chapter__content blockquote{
  font-family:var(--ff-base); font-size:.78em; line-height:1.6;
  color:var(--ink-primary-light);
  background:var(--iks-box-bg);
  border:1px solid var(--iks-box-line);
  border-radius:14px; padding:18px 22px; margin:0 0 1.6em;
}
.chapter__content hr{ border:none; text-align:center; margin:2.2em 0; }
.chapter__content hr::before{
  content:"\2726 \2726 \2726"; font-size:12px; letter-spacing:14px; color:var(--ink-text-muted);
}

/* progress bar amber */
.progress__bar, #progress .progress__bar, .chapter__progress-bar{
  background:linear-gradient(90deg,var(--ink-primary),var(--ink-primary-light)) !important;
}

/* ==========================================================================
   6. MISC
   ========================================================================== */
.footer, footer.footer{ border-top:1px solid var(--iks-line); }
a{ transition:color .3s cubic-bezier(0.32,0.72,0,1); }

/* guest login gate: inline dark box + style.css forcing every light-mode div to
   near-black text = 1.06:1. Repaint the box for light mode. */
html.fictioneer-theme[data-mode="light"] .ink-login-gate{
  background:linear-gradient(180deg,#FFFFFF,#F1EFE9) !important;
  border-color:rgba(180,115,42,.42) !important;
  box-shadow:0 10px 30px rgba(20,22,28,.10) !important;
}
html.fictioneer-theme[data-mode="light"] .ink-login-gate a[style*="border"]{
  border-color:rgba(150,96,31,.6) !important;
}

/* active chapter tab: Fictioneer's light-mode grey fails AA under white text */
html.fictioneer-theme[data-mode="dark"] .tabs__item._current{
  background:#E5A45C !important;
  color:#1A1005 !important;
}
html.fictioneer-theme[data-mode="light"] .tabs__item._current{
  background:#96601F !important;
  color:#FFFFFF !important;
}

@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}