/* Shared theme tokens for every page (reader, library, login). The reader's
   pre-paint inline script sets body[data-theme] before first paint; these
   variables make the themes consistent across pages. */

:root {
  color-scheme: light;
  --bg: #f4f6f3;
  --panel: #ffffff;
  --panel-strong: #f9faf8;
  --text: #1d241d;
  --muted: #667164;
  --border: #d9dfd5;
  --accent: #1f6f5b;
  --accent-strong: #175545;
  --shadow: 0 16px 40px rgba(37, 45, 35, 0.12);
  --control-bg: color-mix(in srgb, var(--panel), transparent 12%);
  --control-hover: color-mix(in srgb, var(--accent), transparent 91%);
  --control-ring: color-mix(in srgb, var(--accent), transparent 38%);
  /* Interaction-state tokens (touch-feedback pass): consolidate the press
     dim / motion timing / disabled opacity that were copy-pasted across the
     reader + library sheets. Press is a subtle scale-up + dim (flat, no fill). */
  --motion-fast: 120ms;
  --motion-press: 110ms;
  --state-press-opacity: 0.6;
  --state-press-scale: 1.08;
  --state-press-fill: var(--control-hover);
  --state-disabled-opacity: 0.45;
  --state-ring: var(--control-ring);
  --control-icon-size: 28px;
  --sidebar-icon-size: 23px;
  /* Visible glyph size for the mobile header icons (gear/back/audio); the 48px
     button is unchanged — this only grows the icon inside it. */
  --mobile-icon-size: 30px;
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-size-xs: 11px;
  --ui-size-sm: 12px;
  --ui-size-md: 13px;
  --ui-size-page: 10px;
  --ui-size-title: 16px;
  --ui-size-brand: 18px;
  --ui-size-reader-heading: 22px;
  --ui-weight-normal: 400;
  --ui-weight-medium: 500;
  --ui-line-tight: 1.2;
  --ui-line-normal: 1.35;
  --reader-line: 1.58;
  --reader-font: Georgia, "Times New Roman", serif;
  --reader-size: 19px;
  --reader-block-space: clamp(24px, 3.2vh, 38px);
  --reader-controls-space: 48px;
  --reader-page-bottom-reserve: calc(var(--reader-size) * 3.16);
  --reader-inline-space: clamp(18px, 6vw, 96px);
  --mobile-actions-height: 0px;
  --app-height: 100vh;
  --mobile-bottom-reserve: 40px;
  --sidebar-width: 300px;
}

body[data-theme="sepia"] {
  --bg: #f0eadc;
  --panel: #fbf6e9;
  --panel-strong: #f7f1e1;
  --text: #2c2418;
  --muted: #74674f;
  --border: #ddd0b8;
  --accent: #7d4b25;
  --accent-strong: #5e371a;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151716;
  --panel: #1f2422;
  --panel-strong: #252c29;
  --text: #eff3ec;
  --muted: #a5b0a7;
  --border: #39423d;
  --accent: #65c5a7;
  --accent-strong: #8ad9c0;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}

/* Shared input baseline for every page (reader, library, login). Kills the
   Android tap-highlight grey flash globally and, on the chrome/nav controls
   only, closes the residual iOS-Safari tap delay (library/login load no other
   touch-action rule) while making nav bars + button labels non-selectable and
   callout-free. Reader body text (.bilingual-page) is deliberately excluded —
   selection there is intentional. The reader's more-specific touch-action:none
   on .reader/.page-progress-rail/.sheet-panel target non-buttons, so they win. */
* {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
a.book-card,
.library-header,
.mobile-header,
.reader-controls,
.segmented,
.sheet-item {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Reduced motion keeps the press dim/colour but drops the lift: collapsing the
   scale token to 1 neutralises every `scale(var(--state-press-scale))` at once
   (and the page-turn slide is gated separately in styles.css). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --state-press-scale: 1;
  }
}

/* Upload progress pill (uploader.js creates it on both pages — this is the
   only stylesheet they share, hence the one component rule among tokens). */
.upload-pill {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: var(--ui-size-sm);
  line-height: var(--ui-line-tight);
  box-shadow: var(--shadow);
  pointer-events: none;
}