/* Theme tokens, page-level defaults and shared utilities. Loaded first;
   every other stylesheet uses these custom properties rather than literal
   colours, so a theme only has to override them here. */

:root {
  --bg: #0f1115;
  --card-bg: #1a1d24;
  --accent: #0fa0a1;
  --text: #f1f1f3;
  --text-muted: #9a9ea8;
  --on-accent: #fff;
  /* Status colours: hearts/delete/errors, the listened tick, and the
     Backups attention badge/banner. */
  --danger: #e0245e;
  --success: #2ecc71;
  --warning: #f0b429;
  --warning-rgb: 240, 180, 41;
  --on-warning: #1a1d24;
  /* Base colour of the translucent hover/border/scrollbar overlays --
     white on dark themes, black on light, so one rgba(var(--fg-rgb), a)
     works everywhere. */
  --fg-rgb: 255, 255, 255;
  --backdrop: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-modal: 0 12px 32px rgba(0,0,0,0.4);
  --radius: 14px;
  /* Stacking order of the page-level layers. The modals share one layer;
     whichever was opened later is later in <body> and so on top. */
  --z-topbar: 10;
  --z-drawer-backdrop: 20;
  --z-drawer: 30;
  --z-modal: 1000;
  --z-toast: 2000;
  /* Set by the Preferences screen's font size (see prefs.js). */
  --verse-scale: 1.15;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --accent: #0b8586;
  --text: #1a1d24;
  --text-muted: #5c616c;
  --fg-rgb: 0, 0, 0;
  color-scheme: light;
}

/* Jet black and deliberately dim throughout (text, accent, status colours)
   -- meant for use in the dark at night, where even "dark mode" greys and
   saturated reds/greens glare. */
:root[data-theme="night"] {
  --bg: #000;
  --card-bg: #000;
  --accent: #075556;
  --text: #8c8c8c;
  --text-muted: #5a5a5a;
  --on-accent: #a8a8a8;
  /* Muted to roughly --text-muted's brightness, like the accent. */
  --danger: #9c3551;
  --success: #267046;
  --warning: #806020;
  --warning-rgb: 128, 96, 32;
  --on-warning: #000;
  --fg-rgb: 150, 150, 150;
}

:root[data-font-size="small"] { --verse-scale: 1; }
:root[data-font-size="large"] { --verse-scale: 1.35; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Long-pressing titles/subtitles/buttons on mobile popped the OS
     copy/lookup callout -- suppress it app-wide and re-enable selection
     only where users actually want to copy text (the bible passage in
     play_modal, see .info-fulltext in player.css). */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Otherwise mobile Chrome/Safari flash their default grey tap-highlight
     rectangle over any button/link on touch (e.g. list_view rows and the
     play icon) before the real :hover/:active styling ever shows. */
  -webkit-tap-highlight-color: transparent;
}

/* list_view scrolls at the document level -- hide the browser's own
   scrollbar (ugly on desktop) while leaving scrolling itself untouched. */
html {
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

/* play_modal is open: freeze list_view underneath so a touch drag on the
   backdrop, or past the end of the modal's own scroll areas, doesn't scroll
   it. */
html.player-modal-open {
  overflow: hidden;
}

/* The JS shows and hides things by toggling this class. !important because
   this file loads first, and components later set their own `display`.
   The drawer is the exception: it slides out instead (see nav.css). */
.hidden:not(.drawer) {
  display: none !important;
}