/* Warm Editorial tokens, shared with yznts.cc and Babel.
   Tailwind maps its colour names onto these variables, so utilities stay
   theme-aware without a second set of classes.

   Faces are self-hosted in static/fonts.css — nothing is fetched from a CDN.
   Newsreader carries no Cyrillic, so the serif stack names Source Serif 4
   after it; CSS falls back per glyph, so Latin and Cyrillic can sit in the
   same run of text without markup. */

:root {
  --bg:        #f7f3ec;
  --bg-soft:   #efe9dd;
  --bg-sunk:   #ebe4d4;
  --ink:       #1f1b16;
  --ink-soft:  #4a423a;
  --ink-mute:  #7a7066;
  --rule:      #d9d0bd;
  --rule-soft: #e6dfd0;
  --accent:    #cc785c;
  --accent-ink:#a5573e;
  --tag-bg:    #ece4d2;

  /* status, deliberately separate from the accent */
  --ok:   #4f7a52;
  --warn: #a8752c;
  --crit: #b04a3f;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
}

[data-theme="dark"] {
  --bg:        #1a1613;
  --bg-soft:   #221d18;
  --bg-sunk:   #14110e;
  --ink:       #f1ebdf;
  --ink-soft:  #d2c8b8;
  --ink-mute:  #897e6e;
  --rule:      #3a3128;
  --rule-soft: #2a231d;
  --accent:    #e89479;
  --accent-ink:#f0a88e;
  --tag-bg:    #2a231d;

  --ok:   #7fa882;
  --warn: #d2a457;
  --crit: #e08276;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
  transition: background-color .25s ease, color .25s ease;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }

[x-cloak] { display: none !important; }

/* theme toggle icon swap */
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* htmx: show a pending state on the target while a request is in flight */
.htmx-request.is-busy,
.htmx-request .is-busy { opacity: .55; }

.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }