/**
 * Chapter reader — theme tokens, chrome, layout (one body class = full palette).
 *
 * @package WP_YoteNov
 */

/* --- Reading themes (values from reference HTML exports) --- */

body.reader-page.reader-theme-system {
    --reader-bg: #09090b;
    --reader-surface-50: #0c0c0e;
    --reader-surface-100: #121214;
    --reader-surface-300: #27272a;
    --reader-text: #f4f4f5;
    --reader-text-muted: #a1a1aa;
    --reader-text-subtle: #52525b;
    --reader-header-bg: rgba(9, 9, 11, 0.8);
    --reader-header-border: rgba(255, 255, 255, 0.08);
    --reader-content: rgba(244, 244, 245, 0.88);
}

body.reader-page.reader-theme-light {
    --reader-bg: #ffffff;
    --reader-surface-50: #f4f4f5;
    --reader-surface-100: #e4e4e7;
    --reader-surface-300: #d4d4d8;
    --reader-text: #18181b;
    --reader-text-muted: #52525b;
    --reader-text-subtle: #71717a;
    --reader-header-bg: rgba(255, 255, 255, 0.92);
    --reader-header-border: #e4e4e7;
    --reader-content: rgb(26, 26, 26);
}

body.reader-page.reader-theme-oled {
    --reader-bg: #000000;
    --reader-surface-50: #0a0a0a;
    --reader-surface-100: #141414;
    --reader-surface-300: #27272a;
    --reader-text: #f8fafc;
    --reader-text-muted: #a1a1aa;
    --reader-text-subtle: #52525b;
    --reader-header-bg: rgba(0, 0, 0, 0.88);
    --reader-header-border: rgba(255, 255, 255, 0.08);
    --reader-content: rgb(248, 250, 252);
}

body.reader-page.reader-theme-sepia {
    --reader-bg: #fbf0e3;
    --reader-surface-50: #f5e6d3;
    --reader-surface-100: #ebd9c4;
    --reader-surface-300: #d4c4a8;
    --reader-text: #433422;
    --reader-text-muted: #6b5344;
    --reader-text-subtle: #8b7355;
    --reader-header-bg: rgba(251, 240, 227, 0.94);
    --reader-header-border: #d4c4a8;
    --reader-content: rgb(67, 52, 34);
}

body.reader-page.reader-theme-green {
    --reader-bg: #eef3ef;
    --reader-surface-50: #e3ebe5;
    --reader-surface-100: #d5e0d7;
    --reader-surface-300: #b8c9bb;
    --reader-text: #1a2e1a;
    --reader-text-muted: #2d4a2d;
    --reader-text-subtle: #4a6b4a;
    --reader-header-bg: rgba(238, 243, 239, 0.94);
    --reader-header-border: #b8c9bb;
    --reader-content: rgb(45, 74, 45);
}

body.reader-page.reader-theme-pink {
    --reader-bg: #fff5f7;
    --reader-surface-50: #ffe8ec;
    --reader-surface-100: #ffd6de;
    --reader-surface-300: #f5b8c4;
    --reader-text: #4c0519;
    --reader-text-muted: #9f1239;
    --reader-text-subtle: #be185d;
    --reader-header-bg: rgba(255, 245, 247, 0.94);
    --reader-header-border: #f5b8c4;
    --reader-content: rgb(76, 5, 25);
}

body.reader-page.reader-theme-slate {
    --reader-bg: #0f172a;
    --reader-surface-50: #1e293b;
    --reader-surface-100: #334155;
    --reader-surface-300: #475569;
    --reader-text: #f1f5f9;
    --reader-text-muted: #94a3b8;
    --reader-text-subtle: #64748b;
    --reader-header-bg: rgba(15, 23, 42, 0.92);
    --reader-header-border: rgba(255, 255, 255, 0.08);
    --reader-content: rgb(241, 245, 249);
}

body.reader-page.reader-theme-graphite {
    --reader-bg: #272727;
    --reader-surface-50: #323232;
    --reader-surface-100: #3d3d3d;
    --reader-surface-300: #525252;
    --reader-text: #f4f4f5;
    --reader-text-muted: #a1a1aa;
    --reader-text-subtle: #71717a;
    --reader-header-bg: rgba(39, 39, 39, 0.92);
    --reader-header-border: rgba(255, 255, 255, 0.08);
    --reader-content: rgb(212, 212, 216);
}

/* Bridge reader tokens → Tailwind semantic colors on this page */
body.reader-page[class*="reader-theme-"] {
    --surface: var(--reader-bg);
    --surface-50: var(--reader-surface-50);
    --surface-100: var(--reader-surface-100);
    --surface-300: var(--reader-surface-300);
    --text: var(--reader-text);
    --text-muted: var(--reader-text-muted);
    --text-subtle: var(--reader-text-subtle);
}

body.reader-page {
    --reader-font-size: 18px;
    --reader-line-height: 1.8;
    --reader-max-width: 850px;
    --reader-font-family: var(--font-serif);
    --reader-progress: 0%;
    --reader-side-progress: 0%;
    background-color: var(--reader-bg);
    color: var(--reader-text);
}

/* Layout */
.reader-article {
    max-width: var(--reader-max-width);
}

.reader-chapter-content {
    font-family: var(--reader-font-family);
    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);
    color: var(--reader-content);
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#reader-progress-fill {
    width: var(--reader-progress);
}

#reader-side-fill {
    height: var(--reader-side-progress);
}

/* Chrome visible by default; hidden while scrolling down */
body.reader-page .reader-head,
body.reader-page .reader-foot {
    transform: translateY(0);
}

body.reader-page.reader-chrome-hidden .reader-head {
    transform: translateY(-100%);
}

body.reader-page.reader-chrome-hidden .reader-foot {
    transform: translateY(100%);
}

/* Header separator — always visible (reference: subtle 1px under chrome) */
body.reader-page .reader-head {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--reader-header-border, var(--reader-surface-300));
}

/* Settings modal — theme picker (reference-aligned; CSS-only, not Tailwind CDN) */
#reader-modal-settings .reader-settings-theme-swatch {
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#reader-modal-settings .reader-settings-theme-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    stroke: currentColor;
    color: rgb(225, 29, 72);
}

#reader-modal-settings .reader-settings-theme-label {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.2s ease;
}

#reader-modal-settings .reader-settings-theme-btn:hover .reader-settings-theme-label {
    color: rgba(255, 255, 255, 0.6);
}

#reader-modal-settings .reader-settings-theme-btn:hover .reader-settings-theme-swatch {
    border-color: rgba(255, 255, 255, 0.2);
}

#reader-modal-settings .reader-settings-theme-btn.active .reader-settings-theme-swatch {
    border-color: rgb(225, 29, 72);
    box-shadow: 0 0 15px rgba(225, 29, 72, 0.3);
}

#reader-modal-settings .reader-settings-theme-btn.active .reader-settings-theme-label {
    color: rgb(225, 29, 72);
}

#reader-modal-settings .reader-settings-theme-btn.active:hover .reader-settings-theme-label {
    color: rgb(225, 29, 72);
}

/* Per-theme swatch backgrounds */
/* Système = solid dark (not a black/white split) */
#reader-modal-settings .reader-settings-swatch-system {
    background-color: #09090b;
}

#reader-modal-settings .reader-settings-swatch-light {
    background-color: #ffffff;
}

#reader-modal-settings .reader-settings-swatch-oled {
    background-color: #000000;
}

#reader-modal-settings .reader-settings-swatch-sepia {
    background-color: #fbf0e3;
}

#reader-modal-settings .reader-settings-swatch-green {
    background-color: #eef3ef;
}

#reader-modal-settings .reader-settings-swatch-pink {
    background-color: #fff5f7;
}

#reader-modal-settings .reader-settings-swatch-slate {
    background-color: #0f172a;
}

#reader-modal-settings .reader-settings-swatch-graphite {
    background-color: #272727;
}

/* Per-theme icon stroke colors (reference) */
#reader-modal-settings [data-palette="sepia"] .reader-settings-theme-icon {
    color: rgb(157, 109, 61);
}

#reader-modal-settings [data-palette="green"] .reader-settings-theme-icon {
    color: rgb(45, 106, 79);
}

#reader-modal-settings [data-palette="slate"] .reader-settings-theme-icon {
    color: rgb(56, 189, 248);
}

.reader-foot {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Settings modal previews (no inline styles in templates) */
.reader-settings-font-sans { font-family: var(--font-sans); }
.reader-settings-font-geom { font-family: var(--font-montserrat); }
.reader-settings-font-serif { font-family: var(--font-garamond); }
.reader-settings-font-lora { font-family: var(--font-lora); }
.reader-settings-font-merri { font-family: var(--font-serif); }
.reader-settings-font-basker { font-family: var(--font-baskerville); }
.reader-settings-font-bitter { font-family: var(--font-bitter); }
.reader-settings-font-robo { font-family: var(--font-roboto); }
.reader-settings-font-disp { font-family: var(--font-display); }
.reader-settings-font-mono { font-family: var(--font-mono); }
.reader-settings-font-dyslexic { font-family: OpenDyslexic, sans-serif; }