/* Estetica22 — themes: ink modes over the journey canvas. */
body {
  color: var(--ink); background: var(--liwe3-bg);
  transition: color var(--dur-ink) var(--ease-out);
}
::selection { background: var(--liwe3-light-mode1); color: #fff; }

/* chapter ink flip (JS-driven as the scene darkens) */
body[data-ink="light"] {
  --ink: oklch(0.96 0.012 85);
  --ink-soft: oklch(0.96 0.012 85 / .75);
  --hairline: oklch(0.88 0.045 85 / .35);
  --glass-bg: oklch(0.35 0.020 145 / .38);
  --glass-border: oklch(0.88 0.045 85 / .25);
}

a { color: inherit; text-decoration-color: var(--hairline); text-underline-offset: .25em; transition: text-decoration-color .3s var(--ease-out); }
a:hover { text-decoration-color: currentColor; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .8em 1.9em; border-radius: var(--radius-arch);
  font-family: var(--font-body); font-weight: 500; font-size: .82rem;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .35s var(--ease-out), background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.btn:hover { transform: scale(1.02); }
.btn-primary { background: var(--liwe3-light-mode1); color: #fff; }
.btn-primary:hover { background: oklch(0.57 0.03 145); }
.btn-ghost { border-color: var(--hairline); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }

:focus-visible { outline: 2px solid var(--liwe3-light-mode1); outline-offset: 3px; border-radius: 2px; }
body[data-ink="light"] :focus-visible { outline-color: var(--liwe3-light-mode2); }