/* Light/dark tokens and header tools, ported from the Thirumurai reader (galeon/thirumurai reader/css/reader.css).
   Light is the default; dark is chosen from the header toggle and stored under the same "tm-theme" key. */
@font-face {
  font-family: "Noto Serif Tamil";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/noto-serif-tamil-500.woff2") format("woff2");
  unicode-range: U+0B82-0BFA, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Serif Tamil";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/noto-serif-tamil-600.woff2") format("woff2");
  unicode-range: U+0B82-0BFA, U+200C-200D, U+25CC;
}
:root {
  --paper: #F6EFE2;
  --ink: #2B211B;
  --muted: #66574A;
  --line: rgba(43, 33, 27, 0.15);
  --mark: #9E4426;
  --soft: #FFFBF4;
  --dead: rgba(43, 33, 27, 0.32);
  --glow-a: rgba(214, 150, 82, 0.16);
  --glow-b: rgba(176, 108, 58, 0.08);
  --glow-a-wide: rgba(214, 150, 82, 0.16);
  --glow-b-wide: rgba(186, 116, 62, 0.08);
  color-scheme: light;
}
html[data-theme="dark"] {
  --paper: #140E0C;
  --ink: #F3E6C8;
  --muted: #C2B09A;
  --line: rgba(243, 230, 200, 0.18);
  --mark: #E38B6A;
  --soft: #2A211C;
  --dead: rgba(243, 230, 200, 0.28);
  --glow-a: rgba(226, 148, 70, 0.42);
  --glow-b: rgba(176, 108, 58, 0.18);
  --glow-a-wide: rgba(226, 156, 76, 0.4);
  --glow-b-wide: rgba(186, 116, 62, 0.22);
  color-scheme: dark;
}
html { background: var(--paper); color: var(--ink); }
.tools {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  z-index: 2;
}
.tools button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0.5rem;
  font: inherit;
}
.tools button:disabled { color: var(--dead); cursor: default; }
.tools button:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.text-size {
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 0.1rem;
}
.text-size::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  border-left: 1px solid var(--line);
}
.text-size button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  font-family: "Noto Serif Tamil", serif;
}
.text-size .ts-a, .text-size .ts-sign { display: block; line-height: 1; }
.ts-down .ts-a { font-size: 0.86rem; }
.ts-up .ts-a { font-size: 1.12rem; }
.ts-sign {
  font-family: Palatino, serif;
  font-size: 0.82rem;
  color: var(--muted);
}
.text-size button:disabled .ts-sign { color: inherit; }
.theme .sun { display: none; }
html[data-theme="dark"] .theme .sun { display: block; }
html[data-theme="dark"] .theme .moon { display: none; }