/* Shell palette — light default, system dark via prefers-color-scheme. */

:root {
  color-scheme: light dark;

  --black: #111111;
  --white: #ffffff;
  --gray: #666666;
  --line: #dddddd;
  --surface: #f5f5f5;

  --c-darkest: var(--black);
  --c-lightest: var(--white);
  --c-light: var(--surface);
  --c-border: var(--line);

  --page-frame-bg: var(--white);
  --topbar-bg: var(--white);
  --topbar-fg: var(--black);
  --topbar-border: var(--line);
  --topbar-accent-height: 3px;
  --panel-accent-toc: #e53935;
  --panel-accent-main: mediumseagreen;
  --panel-accent-context: #29b6f6;
  --panel-accent-notes: #fdd835;
  --library-filter-gradient: linear-gradient(
    90deg,
    var(--panel-accent-toc) 0%,
    var(--panel-accent-main) 33.33%,
    var(--panel-accent-context) 66.66%,
    var(--panel-accent-notes) 100%
  );

  --text-primary: var(--black);
  --text-muted: var(--gray);
  --bg-primary: var(--white);
  --bg-library: var(--white);
  --bg-chrome: var(--white);
  --border-color: var(--line);
  --input-bg: var(--white);
  --input-fg: var(--black);
  /* Right-side overlays: inner edge left. Left-side overlays: inner edge right. */
  --overlay-shadow-start: -4px 0 12px rgba(0, 0, 0, 0.12);
  --overlay-shadow-end: 4px 0 12px rgba(0, 0, 0, 0.12);
  --search-hit-bg: #ffe566;
  --search-hit-current-bg: #ffeb3b;
  --search-hit-current-ring: #f57c00;
  --highlight-yellow: #ffeb3b;
  --highlight-blue: #4fc3f7;
  --highlight-fg: inherit;
  --notes-card-highlight-bg: #fffde7;
  --notes-card-note-bg: #e3f2fd;
  --cover-bg: var(--bg-library);
  --app-meta-fg: var(--text-muted);
  --app-meta-bg: var(--surface);
  --led-green: #34c759;
  --led-orange: #ff9f0a;
  --led-red: #ff453a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --black: #f2f2f2;
    --white: #111111;
    --gray: #aaaaaa;
    --line: #333333;

    --page-frame-bg: #111111;
    --topbar-bg: #111111;
    --topbar-fg: #f2f2f2;
    --topbar-border: #333333;

    --text-primary: var(--black);
    --text-muted: var(--gray);
    --bg-primary: #111111;
    --bg-library: #111111;
    --bg-chrome: #111111;
    --border-color: var(--line);
    --input-bg: #111111;
    --input-fg: var(--black);
    --surface: #111111;
    --overlay-shadow-start: -4px 0 14px rgba(0, 0, 0, 0.45);
    --overlay-shadow-end: 4px 0 14px rgba(0, 0, 0, 0.45);
    --search-hit-bg: #c9a800;
    --search-hit-current-bg: #ffd54f;
    --search-hit-current-ring: #ff9800;
    --highlight-yellow: #ffd54f;
    --highlight-blue: #29b6f6;
    --highlight-fg: #111111;
    --notes-card-highlight-bg: #3d3822;
    --notes-card-note-bg: #1e3244;
    --cover-bg: #1a1a1a;
    --app-meta-fg: var(--text-muted);
    --app-meta-bg: #1a1a1a;
  }
}

html[data-theme="dark"] {
  --black: #f2f2f2;
  --white: #111111;
  --gray: #aaaaaa;
  --line: #333333;

  --page-frame-bg: #111111;
  --topbar-bg: #111111;
  --topbar-fg: #f2f2f2;
  --topbar-border: #333333;

  --text-primary: var(--black);
  --text-muted: var(--gray);
  --bg-primary: #111111;
  --bg-library: #111111;
  --bg-chrome: #111111;
  --border-color: var(--line);
  --input-bg: #111111;
  --input-fg: var(--black);
  --surface: #111111;
  --overlay-shadow-start: -4px 0 14px rgba(0, 0, 0, 0.45);
  --overlay-shadow-end: 4px 0 14px rgba(0, 0, 0, 0.45);
  --search-hit-bg: #c9a800;
  --search-hit-current-bg: #ffd54f;
  --search-hit-current-ring: #ff9800;
  --highlight-yellow: #ffd54f;
  --highlight-blue: #29b6f6;
  --highlight-fg: #111111;
  --notes-card-highlight-bg: #3d3822;
  --notes-card-note-bg: #1e3244;
  --cover-bg: #1a1a1a;
  --app-meta-fg: var(--text-muted);
  --app-meta-bg: #1a1a1a;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.topbar,
#library-topbar,
#library-topbar .library-topbar-primary,
#library-topbar .library-topbar-secondary,
#reader-topbar {
  background-color: var(--topbar-bg);
  color: var(--topbar-fg);
}

#library,
#library .library-body {
  background: var(--bg-library);
}

.topbar .icon-btn,
.library-topbar-brand,
.reader-topbar-title,
#library-topbar .library-topbar-secondary,
#library-topbar .library-grid-filter {
  color: var(--topbar-fg);
}

.reader-toc-toolbar,
#reader-main-toolbar,
.reader-context-toolbar,
.reader-notes-toolbar,
.library-settings-toolbar {
  background: var(--bg-chrome);
  color: var(--text-primary);
}

.reader-toc-toolbar .icon-btn,
#reader-main-toolbar .icon-btn,
.reader-context-toolbar .icon-btn,
.reader-notes-toolbar .icon-btn,
.library-settings-toolbar .icon-btn,
.reader-context-toolbar .context-split-search-btn {
  color: var(--text-primary);
}

input,
select,
textarea {
  background: var(--input-bg);
  color: var(--input-fg);
  border: 1px solid var(--border-color);
}

.field-plain > input[type="text"],
.field-plain input[type="text"],
#library-topbar .library-grid-filter input,
.reader-toc-filter input,
.reader-notes-filter input,
.reader-main-search-field input {
  border: none;
  background: var(--input-bg);
  color: var(--input-fg);
}

.field-plain > input[type="text"]::placeholder,
.field-plain input[type="text"]::placeholder,
#library-topbar .library-grid-filter input::placeholder,
.reader-toc-filter input::placeholder,
.reader-notes-filter input::placeholder,
.reader-main-search-field input::placeholder {
  color: var(--text-muted);
}

.reader-toc-body,
.reader-notes-body,
.library-settings-body {
  background: var(--bg-chrome);
}

.reader-context,
#reader-context.is-overlay {
  background: var(--bg-chrome);
}

.reader-context-body {
  background: transparent;
}

#context-viewport {
  background: transparent;
  color-scheme: light dark;
}

mark.reader-search-hit {
  background: var(--search-hit-bg);
  color: var(--highlight-fg);
}

mark.reader-search-hit.is-current {
  outline: 0.125rem solid var(--search-hit-current-ring);
  background: var(--search-hit-current-bg);
  color: var(--highlight-fg);
}

::highlight(librus-highlight-yellow),
.librus-highlight--yellow {
  background-color: var(--highlight-yellow);
  color: var(--highlight-fg);
}

::highlight(librus-highlight-blue),
.librus-highlight--blue,
.librus-highlight[data-note] {
  background-color: var(--highlight-blue);
  color: var(--highlight-fg);
}

.reader-notes-annotation {
  background: var(--notes-card-note-bg);
}

.reader-notes-annotation--highlight-only {
  background: var(--notes-card-highlight-bg);
}

.library-grid-cover {
  background: var(--cover-bg);
  color: var(--text-primary);
}

.context-provider-menu {
  background: var(--bg-chrome);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.context-provider-option {
  color: var(--text-primary);
}

.context-loading-overlay {
  background: var(--bg-chrome);
  color: var(--text-primary);
}

html[data-theme="dark"] .topbar .icon-btn img,
html[data-theme="dark"] .topbar .icon-brand-logo,
html[data-theme="dark"] .library-topbar-brand img,
html[data-theme="dark"] .toolbar .icon-btn img,
html[data-theme="dark"] .context-split-search-btn img {
  filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .topbar .icon-btn img,
  html:not([data-theme]) .topbar .icon-brand-logo,
  html:not([data-theme]) .library-topbar-brand img,
  html:not([data-theme]) .toolbar .icon-btn img,
  html:not([data-theme]) .context-split-search-btn img {
    filter: brightness(0) invert(1);
  }
}