/* CipherFolio — quiet editorial theme */
:root {
  color-scheme: light;
  --paper: #f7f5ef;
  --paper-raised: #fffefa;
  --paper-muted: #efede5;
  --ink: #282820;
  --ink-soft: #66665b;
  --line: #dedbd1;
  --accent: #6e7656;
  --accent-hover: #596247;
  --danger: #9b5148;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

html, body { min-height: 100%; background: var(--paper) !important; color: var(--ink) !important; }
body { font-family: var(--sans) !important; font-size: 14px; line-height: 1.55; }
::selection { background: #dce0ce; color: var(--ink); }

/* Keep the existing layout utilities, but remove the heavy dark/glass styling. */
.bg-obsidian-950, .bg-obsidian-900, .bg-obsidian-850, .bg-obsidian-800,
.bg-obsidian-700 { background: var(--paper-raised) !important; }
.bg-obsidian-950\/90, .bg-obsidian-900\/95 { background: rgba(247,245,239,.96) !important; }
.bg-obsidian-900\/40 { background: rgba(255,254,250,.72) !important; }
.bg-gradient-to-br { background: var(--paper-raised) !important; }
.text-zinc-100, .text-zinc-200, .text-zinc-300 { color: var(--ink) !important; }
.text-zinc-400, .text-zinc-500 { color: var(--ink-soft) !important; }
.text-zinc-950 { color: #fffefa !important; }
.text-amber-200, .text-amber-300, .text-amber-400 { color: var(--accent) !important; }
.text-emerald-300, .text-emerald-400 { color: var(--accent) !important; }
.border-zinc-700, .border-zinc-700\/80, .border-zinc-800, .border-zinc-800\/80,
.border-zinc-800\/90 { border-color: var(--line) !important; }
.border-amber-500\/30, .border-amber-500\/20 { border-color: #d8d8c8 !important; }
.shadow-xl, .shadow-2xl, .shadow-md, .shadow-sm, .shadow-inner { box-shadow: none !important; }
.backdrop-blur, .backdrop-blur-md, .backdrop-blur-sm { backdrop-filter: none !important; }
.rounded-2xl { border-radius: 10px !important; }
.rounded-xl { border-radius: 7px !important; }
.rounded-lg { border-radius: 6px !important; }

/* Page frame and masthead */
#main-header { border-bottom: 1px solid var(--line) !important; background: rgba(247,245,239,.97) !important; }
#main-header > div { max-width: 1120px; }
#main-header .w-9.h-9 { width: 34px !important; height: 34px !important; border-radius: 7px !important; background: var(--paper-muted) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
#main-header svg { color: var(--accent) !important; }
.font-serif, h1, h2, h3 { font-family: var(--serif) !important; font-weight: 500 !important; letter-spacing: -.025em; }
#main-header .font-serif { font-size: 23px !important; }
#library-view { max-width: 1120px; padding-top: 42px !important; }
#library-view > section:first-child { padding: 0 0 28px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; }
#library-view > section:first-child h1 { font-size: clamp(2.15rem, 5vw, 3.2rem) !important; line-height: 1.05; margin-top: 12px; }
#library-view > section:first-child p { max-width: 660px; color: var(--ink-soft) !important; font-size: 14px !important; }
#library-view > section:first-child .inline-flex { background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--ink-soft) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 10px !important; }

/* Buttons: understated, consistent, accessible. */
button { font-family: var(--sans) !important; cursor: pointer; box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.bg-amber-500, .hover\:bg-amber-400:hover { background: var(--accent) !important; color: white !important; }
.bg-obsidian-800, .bg-obsidian-850 { background: var(--paper-raised) !important; }
button.border, button[class*="border-"] { border-color: var(--line) !important; }
button:hover { border-color: #b9b8aa !important; }
#auth-nav-btn { padding: 8px 14px !important; border-radius: 5px !important; }
#mode-indicator-btn { background: transparent !important; }

/* Library controls, book tiles and empty state */
#library-view > section:nth-of-type(2) { padding-top: 22px; }
#books-grid { gap: 18px !important; }
#books-grid > * { background: var(--paper-raised) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: none !important; }
#empty-library-state { background: transparent !important; border-color: #c9c6ba !important; border-radius: 8px !important; }
#empty-library-state .w-12 { background: var(--paper-muted) !important; border-color: var(--line) !important; border-radius: 7px !important; }
#crypto-activity-banner { background: #eeeee5 !important; border-color: var(--line) !important; color: var(--ink) !important; }

/* Forms and dialogs */
#auth-modal, #setup-modal { background: rgba(35,35,29,.42) !important; backdrop-filter: blur(2px) !important; }
#auth-modal > div, #setup-modal > div { background: var(--paper-raised) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: 0 18px 60px rgba(30,30,20,.15) !important; }
input, select, textarea { background: #fffefa !important; color: var(--ink) !important; border: 1px solid #d4d1c6 !important; border-radius: 5px !important; font: 14px var(--sans) !important; }
input::placeholder, textarea::placeholder { color: #99978c !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid #dce0ce !important; border-color: var(--accent) !important; }
label { color: var(--ink-soft) !important; }

/* Reader remains calm and paper-like too. */
#reader-view, #reader-toolbar, #toc-drawer { background: var(--paper) !important; color: var(--ink) !important; }
#reader-toolbar, #toc-drawer { border-color: var(--line) !important; }
#reader-book-title { font-family: var(--serif) !important; font-size: 17px !important; font-weight: 500 !important; }
#viewer { background: var(--paper) !important; }

/* Mobile refinements */
@media (max-width: 640px) {
  #library-view { padding-top: 28px !important; }
  #library-view > section:first-child { padding-bottom: 22px !important; }
  #main-header > div { height: 58px !important; }
  #mode-indicator-btn { max-width: 125px; overflow: hidden; }
}