/* ===========================================================================
   skaryna.ai — night edition + the day/night switch (2026-11-12)
   Concept: the page becomes a dark walnut desk at night; text is parchment
   tint, rules are gold, and the woodcuts, facsimiles and paper plates stay
   paper, like printed sheets lying on that desk.
   Contrast (WCAG): text #EDE6D4 on #17140F 14.8:1; muted #B3A890 7.8:1;
   accent #E0868B 7.0:1; gold #D8B65E 9.4:1; link #E4979B 8.1:1.
   Everything here is scoped to :root[data-theme="dark"] or .sk-dn, so the day
   edition is unchanged. OFF SWITCH: inc/skaryna-daynight.php require_once.
   =========================================================================== */

/* ── 1. palette: theme.json presets → night values ───────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --wp--preset--color--bg: #17140F;
  --wp--preset--color--base: #17140F;
  --wp--preset--color--surface: #201B14;
  --wp--preset--color--surface-2: #120F0B;
  --wp--preset--color--base-2: #120F0B;
  --wp--preset--color--surface-3: #2A241B;
  --wp--preset--color--border: #6E6350;
  --wp--preset--color--border-strong: #CFC6B2;
  --wp--preset--color--ink: #EDE6D4;
  --wp--preset--color--contrast: #EDE6D4;
  --wp--preset--color--on-surface: #EDE6D4;
  --wp--preset--color--ink-2: #D5CCB8;
  --wp--preset--color--ink-3: #B3A890;
  --wp--preset--color--muted: #B3A890;
  --wp--preset--color--subtle: #C9A97C;
  --wp--preset--color--accent: #E0868B;
  --wp--preset--color--danger: #E0868B;
  --wp--preset--color--link: #E4979B;
  --wp--preset--color--accent-strong: #F2B7BA;
  --wp--preset--color--link-hover: #F2B7BA;
  --wp--preset--color--on-accent: #17140F;
  --wp--preset--color--accent-contrast: #17140F;
  --wp--preset--color--contrast-2: #0E0C09;
  --wp--preset--color--success: #8FBF86;
  --wp--preset--color--warning: #D9A55C;
  --wp--preset--color--gold: #D8B65E;
  --wp--preset--color--gold-line: #E2C273;
  --slovo-muted-gray: #3A3328;
  --slovo-white: #201B14;
  --sk-head-bg: #1A1611;
  --sk-paper: #F3ECDC;
  background-color: #17140F;
}
:root { --sk-head-bg: #F7F2E6; }

/* ── 2. chrome.css hard-codes the light masthead in hex ─────────────────── */
:root[data-theme="dark"] .sk-header,
:root[data-theme="dark"] .sk-masthead { background: var(--sk-head-bg); color: #EDE6D4; }
:root[data-theme="dark"] .sk-header { box-shadow: 0 1px 0 rgba(216, 182, 94, 0.28), 0 4px 14px -8px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .sk-brand,
:root[data-theme="dark"] .sk-iconbtn,
:root[data-theme="dark"] .sk-nav__list a,
:root[data-theme="dark"] .sk-nav .wp-block-navigation-item__content { color: #EDE6D4; }
:root[data-theme="dark"] #sk-searchtoggle:checked ~ .sk-masthead .sk-iconbtn[for="sk-searchtoggle"],
:root[data-theme="dark"] .sk-iconbtn:hover,
:root[data-theme="dark"] .sk-nav__list a:hover,
:root[data-theme="dark"] .sk-nav .wp-block-navigation-item__content:hover,
:root[data-theme="dark"] .sk-nav .wp-block-navigation-item__content[aria-current="page"] { color: #E0868B; border-bottom-color: #E0868B; }
:root[data-theme="dark"] .sk-burger span { background: #EDE6D4; }
:root[data-theme="dark"] .sk-burger .sk-ico { color: #EDE6D4; }
:root[data-theme="dark"] .sk-burger:focus-visible { outline-color: #E0868B; }
:root[data-theme="dark"] .sk-searchbar { background: #120F0B; }
@media (max-width: 900px) {
  :root[data-theme="dark"] .sk-nav { background: var(--sk-head-bg); border-right-color: rgba(216, 182, 94, 0.25); }
}
/* The lockup draws its wordmark in ink: at night it turns parchment. The
   emblem keeps its colours (a paper seal). skaryna-daynight.js adopts a sheet
   into the logo's shadow root that reads this custom property. */
:root[data-theme="dark"] { --sk-logo-word: #EDE6D4; }

/* ── 3. body tone ───────────────────────────────────────────────────────── */
:root[data-theme="dark"] body {
  background-color: #17140F;
  background-image: radial-gradient(1200px 800px at 100% -10%, rgba(216, 182, 94, 0.07), transparent 60%);
  color: #EDE6D4;
}

/* ── 3b. the colophon stays the darkest band (it is ink-on-paper reversed by day) */
:root[data-theme="dark"] .sk-footer { background: #0E0C09; color: #EDE6D4; }
:root[data-theme="dark"] .sk-footer .sk-wordmark { color: #EDE6D4; }

/* ── 3c. ai-chatboxes reading layers (plugin CSS hard-codes paper hex) ──────
   The L0 sheets and the L1 quote figure keep their paper: printed matter on
   the desk. Only text that sits on the night ground is lifted. */
:root[data-theme="dark"] .aic-two-layer .aic-vertical-tabs-nav { border-bottom-color: #8A7340; }
:root[data-theme="dark"] .aic-two-layer .aic-vertical-tab-link { color: #CFC6B2; border-bottom-color: #8A7340; }
:root[data-theme="dark"] .aic-two-layer .aic-vertical-tab-link:hover { background: rgba(216, 182, 94, .10); }
:root[data-theme="dark"] .aic-two-layer .aic-vertical-tab-link.active { background: #F3E8CF; color: #1B130B; border-color: #8A7340 #8A7340 #F3E8CF; }
:root[data-theme="dark"] .aic-two-layer .aic-vertical-tab-link[data-target="tab-l1"].active { background: transparent; color: #EDE6D4; border-bottom-color: #17140F; }
:root[data-theme="dark"] .aic-two-layer .aic-vertical-tab-link[data-target="tab-l1"].active .aic-layer-code { color: #E0868B; }
:root[data-theme="dark"] .aic-two-layer .aic-vertical-tab-link:focus-visible { outline-color: #E0868B; }
:root[data-theme="dark"] .aic-two-layer em.l1-cu,
:root[data-theme="dark"] .aic-two-layer .l1-cu { color: #E8D3A8; }
:root[data-theme="dark"] .aic-two-layer figure.l1-quote .l1-cu { color: #3A2512; }

/* ── 3d. engraved plates (.sk-frame: hero, dossier) stay printed paper ──── */
:root[data-theme="dark"] .sk-frame { background: #F3ECDC; color: #1C1712; border-color: #F3ECDC; }
:root[data-theme="dark"] .sk-frame::before { border-color: #1C1712; }
:root[data-theme="dark"] .sk-engraving {
  border-color: #B9B0A0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(17, 17, 17, 0.02) 22px 23px), #FBF7EE;
}
:root[data-theme="dark"] .sk-frame .sk-caption,
:root[data-theme="dark"] .sk-frame figcaption { color: #5C5346; }

/* ── 4. switching: colours ease, nothing else ───────────────────────────── */
html.sk-dn-switching body,
html.sk-dn-switching body * {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important;
}

/* ── 5. the switch: sits on the logo emblem ─────────────────────────────── */
.sk-dn {
  position: absolute; z-index: 3;
  margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sk-dn__disc,
.sk-dn__art {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0;
  transition: opacity .14s ease;
}
.sk-dn__disc {
  width: calc(var(--sk-dn-h, 44px) * 1.02); height: calc(var(--sk-dn-h, 44px) * 1.02);
  border-radius: 50%; background: var(--sk-head-bg);
}
.sk-dn__art {
  width: calc(var(--sk-dn-h, 44px) * 1.3); height: calc(var(--sk-dn-h, 44px) * 1.3);
  /* the frames carry a square glow: fade it to a round one */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 74%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 74%, transparent 100%);
  background-image: var(--sk-dn-strip, none);
  background-repeat: no-repeat;
  background-size: 2200% 100%;
  background-position: 0 0;
}
.sk-dn.is-on .sk-dn__disc,
.sk-dn.is-on .sk-dn__art { opacity: 1; }
.sk-dn:focus-visible { outline: 2px solid #7A0F1A; outline-offset: 2px; }
:root[data-theme="dark"] .sk-dn:focus-visible { outline-color: #E0868B; }
@media (prefers-reduced-motion: reduce) {
  .sk-dn__disc, .sk-dn__art { transition: none; }
}