/* assets/css/style.css
   Shared reader theme. Tailwind (CDN) handles most layout/utility styling
   in individual pages; these rules keep the palette consistent and readable.
*/

/* ─── Theme: Light (default) ─── */
:root {
  --reader-bg:     #f7f8fb;
  --reader-fg:     #172033;
  --accent:       #5146a5;
  --accent-hover: #40378c;
  --accent-soft:  #eef0ff;
  --muted:        #526074;
  --surface:      #ffffff;
  --border:       #d9e0ea;
}

/* ─── Theme: Dark ─── */
html.dark {
  --reader-bg: #0f172a;
  --reader-fg: #e2e8f0;
  --accent:    #a78bfa;
  --accent-hover: #c4b5fd;
  --accent-soft: #312e81;
  --muted:     #94a3b8;
  --surface:   #1e293b;
  --border:    #334155;
}

/* ─── Theme: Sepia ─── */
html.sepia {
  --reader-bg: #f5f0e5;
  --reader-fg: #3f352b;
  --accent:    #80643d;
  --accent-hover: #654d2e;
  --accent-soft: #eee4d0;
  --muted:     #6d5b48;
  --surface:   #fffaf0;
  --border:    #d8c9ad;
}

/* ─── Global surfaces and readable light-theme contrast ─────────────────── */
html,
body {
  min-height: 100%;
}

body {
  background-color: var(--reader-bg);
  color: var(--reader-fg);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Tailwind utilities are used throughout the static pages. These scoped
   overrides make the light palette softer without changing dark mode. */
html:not(.dark):not(.sepia) .bg-gray-50 {
  background-color: var(--reader-bg) !important;
}

html:not(.dark):not(.sepia) .bg-white,
html:not(.dark):not(.sepia) .bg-white\/60 {
  background-color: var(--surface) !important;
}

html:not(.dark):not(.sepia) .text-gray-900,
html:not(.dark):not(.sepia) .text-gray-800 {
  color: var(--reader-fg) !important;
}

html:not(.dark):not(.sepia) .text-gray-500,
html:not(.dark):not(.sepia) .text-gray-400 {
  color: var(--muted) !important;
}

html:not(.dark):not(.sepia) .border-gray-100,
html:not(.dark):not(.sepia) .border-gray-200,
html:not(.dark):not(.sepia) .border-gray-300 {
  border-color: var(--border) !important;
}

html:not(.dark):not(.sepia) .text-violet-600 {
  color: var(--accent) !important;
}

html:not(.dark):not(.sepia) .bg-violet-600 {
  background-color: var(--accent) !important;
}

html:not(.dark):not(.sepia) .bg-violet-50,
html:not(.dark):not(.sepia) .bg-violet-100 {
  background-color: var(--accent-soft) !important;
}

html:not(.dark):not(.sepia) .text-violet-700 {
  color: var(--accent-hover) !important;
}

html:not(.dark):not(.sepia) .border-violet-600 {
  border-color: var(--accent) !important;
}

html:not(.dark):not(.sepia) .hover\:bg-violet-700:hover {
  background-color: var(--accent-hover) !important;
}

html:not(.dark):not(.sepia) .hover\:text-violet-700:hover,
html:not(.dark):not(.sepia) .hover\:text-violet-600:hover {
  color: var(--accent-hover) !important;
}

html:not(.dark):not(.sepia) input:focus,
html:not(.dark):not(.sepia) textarea:focus,
html:not(.dark):not(.sepia) select:focus {
  --tw-ring-color: #a5b4fc;
}

/* Keep the optional warm theme calm and readable as well. */
html.sepia body {
  background-color: var(--reader-bg) !important;
  color: var(--reader-fg) !important;
}

html.sepia .bg-gray-50 {
  background-color: var(--reader-bg) !important;
}

html.sepia .bg-white,
html.sepia .bg-white\/60 {
  background-color: var(--surface) !important;
}

html.sepia .text-gray-900,
html.sepia .text-gray-800 {
  color: var(--reader-fg) !important;
}

html.sepia .text-gray-500,
html.sepia .text-gray-400 {
  color: var(--muted) !important;
}

html.sepia .border-gray-100,
html.sepia .border-gray-200,
html.sepia .border-gray-300 {
  border-color: var(--border) !important;
}

html.sepia .text-violet-600 {
  color: var(--accent) !important;
}

html.sepia .bg-violet-600 {
  background-color: var(--accent) !important;
}

html.sepia .bg-violet-50,
html.sepia .bg-violet-100 {
  background-color: var(--accent-soft) !important;
}

html.sepia .text-violet-700 {
  color: var(--accent-hover) !important;
}

html.sepia .border-violet-600 {
  border-color: var(--accent) !important;
}

html.sepia .hover\:bg-violet-700:hover {
  background-color: var(--accent-hover) !important;
}

html.sepia .hover\:text-violet-700:hover,
html.sepia .hover\:text-violet-600:hover {
  color: var(--accent-hover) !important;
}

/* ─── Reader content area ─── */
.reader-content {
  background: var(--reader-bg);
  color:       var(--reader-fg);
  transition:  background 0.2s ease, color 0.2s ease;
}

/* Paragraph spacing inside reader */
.reader-content p {
  margin-bottom: 1.25em;
  line-height: 1.8;
}

/* ─── Accent utilities ─── */
.accent-text  { color: var(--accent); }
.accent-bg    { background-color: var(--accent); }
.accent-border{ border-color: var(--accent); }