/* =============================================================================
   Foliora — theme layer
   A flat white surface by default, a full dark theme on request.
   The dark palette re-points the same design tokens, so components keep their
   proportions and only the ink changes.
   ============================================================================= */

/* ---------- flat paper: no tint, no texture ---------- */
body { background: #ffffff; }
.masthead { background: rgba(255, 255, 255, 0.94); }

/* ---------- library covers: real 3D product renders ---------- */
.cover {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: transparent;
  padding: 0;
  box-shadow: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  transform-style: preserve-3d;
  cursor: pointer;
}
.cover::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  border-radius: 12px;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 30%), rgba(255, 230, 180, 0.35) 0%, rgba(255, 255, 255, 0.1) 22%, transparent 60%);
  opacity: var(--glare-opacity, 0);
  mix-blend-mode: color-dodge;
  transition: opacity 0.35s ease;
  z-index: 5;
}
.cover__shot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 55%;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(var(--lift-z, 0px)) scale(var(--scale, 1));
  filter: drop-shadow(var(--shadow-x, 0px) var(--shadow-y, 16px) var(--shadow-blur, 28px) rgba(15, 35, 56, 0.28))
          drop-shadow(0 2px 4px rgba(15, 35, 56, 0.12));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, filter;
}
.book:hover .cover {
  --glare-opacity: 0.55;
}
.book:hover .cover__shot {
  --scale: 1.04;
  --lift-z: 22px;
  --shadow-y: 26px;
  --shadow-blur: 38px;
  filter: drop-shadow(var(--shadow-x, 0px) var(--shadow-y, 26px) var(--shadow-blur, 38px) rgba(15, 35, 56, 0.34))
          drop-shadow(0 4px 8px rgba(15, 35, 56, 0.16));
}
html[data-theme="dark"] .cover__shot {
  filter: drop-shadow(var(--shadow-x, 0px) var(--shadow-y, 18px) var(--shadow-blur, 32px) rgba(0, 0, 0, 0.72))
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
html[data-theme="dark"] .book:hover .cover__shot {
  filter: drop-shadow(var(--shadow-x, 0px) var(--shadow-y, 30px) var(--shadow-blur, 48px) rgba(0, 0, 0, 0.88))
          drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* ---------- the switch ---------- */
.themeswitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  margin-inline-start: 10px;
  border: 1px solid var(--line);
  color: var(--navy-70);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.themeswitch:hover { color: var(--navy); border-color: var(--navy-35); }
.themeswitch__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

@media (max-width: 860px) {
  .themeswitch { margin: 0 0 14px; align-self: flex-start; }
}

/* =============================================================================
   DARK
   ============================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0d1117;
  --white: #151b24;
  --navy: #e9edf3;          /* ink, not panel: text everywhere */
  --navy-soft: #1d2632;
  --navy-70: rgba(233, 237, 243, 0.74);
  --navy-55: rgba(233, 237, 243, 0.58);
  --navy-35: rgba(233, 237, 243, 0.4);
  --line: rgba(233, 237, 243, 0.16);
  --line-soft: rgba(233, 237, 243, 0.09);
  --gold: #d8b34e;
  --gold-warm: #e6c66a;
  --crimson: #d98f8f;
  --muted: #9aa7b6;

  --panel: #070a0e;
}

html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--navy);
}

html[data-theme="dark"] ::selection { background: var(--gold); color: #0d1117; }

/* panels that were navy-on-paper in light mode */
html[data-theme="dark"] .topline,
html[data-theme="dark"] .credbar,
html[data-theme="dark"] .site-foot,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .btn--solid,
html[data-theme="dark"] .masthead__admin:hover {
  background: var(--panel);
  color: rgba(255, 255, 255, 0.82);
}
html[data-theme="dark"] .btn--solid { border-color: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .btn--solid:hover { background: #16202b; color: #fff; }

html[data-theme="dark"] .masthead {
  background: rgba(13, 17, 23, 0.92);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .wordmark__name { color: var(--navy); }
html[data-theme="dark"] .wordmark__tag,
html[data-theme="dark"] .masthead__nav a,
html[data-theme="dark"] .masthead__toggle { color: var(--navy-70); }
html[data-theme="dark"] .masthead__toggle { border-color: var(--line); }
html[data-theme="dark"] .masthead__nav a:hover { color: var(--navy); }
html[data-theme="dark"] .masthead__admin { border-color: var(--line); }

/* hero */
html[data-theme="dark"] .hero__title { color: var(--navy); }
html[data-theme="dark"] .hero__lede { color: var(--navy-70); }
html[data-theme="dark"] .hero__meta { border-color: var(--line); }
html[data-theme="dark"] .hero__meta dt { color: var(--navy-35); }
html[data-theme="dark"] .hero__meta dd { color: var(--navy); }
html[data-theme="dark"] .stage__head,
html[data-theme="dark"] .stage__label,
html[data-theme="dark"] .stage__ref,
html[data-theme="dark"] .stage__hint { color: var(--navy-35); }
html[data-theme="dark"] .stage__tabs { border-color: var(--line); }
html[data-theme="dark"] .stage__tab { color: var(--navy-55); border-color: var(--line-soft); }
html[data-theme="dark"] .stage__tab.is-active { color: var(--navy); background: rgba(255, 255, 255, 0.04); }

/* index band, credits, plates */
html[data-theme="dark"] .index-band { border-color: var(--line); }
html[data-theme="dark"] .index-band__head { color: var(--navy-35); }
html[data-theme="dark"] .index-band__list li { border-color: var(--line-soft); }
html[data-theme="dark"] .index-band__list p { color: var(--navy-70); }
html[data-theme="dark"] .plate,
html[data-theme="dark"] .plate__body { background: transparent; }
html[data-theme="dark"] .plate__title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-note,
html[data-theme="dark"] .plate__text { color: var(--navy); }
html[data-theme="dark"] .plate__text { color: var(--navy-70); }
html[data-theme="dark"] .plate__specs,
html[data-theme="dark"] .plate__cap,
html[data-theme="dark"] .band__cap { border-color: var(--line); color: var(--navy-35); }
html[data-theme="dark"] .plate__specs dt { color: var(--navy-35); }
html[data-theme="dark"] .plate__specs dd { color: var(--navy); }

/* process and institutions */
html[data-theme="dark"] .steps,
html[data-theme="dark"] .inst-grid { border-color: var(--line); }
html[data-theme="dark"] .step,
html[data-theme="dark"] .inst { border-color: var(--line); }
html[data-theme="dark"] .step__title,
html[data-theme="dark"] .inst__name { color: var(--navy); }
html[data-theme="dark"] .step__body,
html[data-theme="dark"] .inst__body { color: var(--navy-70); }
html[data-theme="dark"] .step__tag,
html[data-theme="dark"] .inst__role { color: var(--navy-35); }

/* library */
html[data-theme="dark"] .books { border-color: var(--line); }
html[data-theme="dark"] .book { border-color: var(--line); background: transparent; }
html[data-theme="dark"] .book:hover { background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .book__title { color: var(--navy); }
html[data-theme="dark"] .book__subtitle { color: var(--navy-55); }
html[data-theme="dark"] .book__summary { color: var(--navy-70); }
html[data-theme="dark"] .book__meta { color: var(--navy-35); }
html[data-theme="dark"] .book__specs { border-color: var(--line); }
html[data-theme="dark"] .book__specs dt { color: var(--navy-35); }
html[data-theme="dark"] .book__specs dd { color: var(--navy); }
html[data-theme="dark"] .btn--ghost { border-color: var(--line); color: var(--navy); }
html[data-theme="dark"] .btn--ghost:hover { border-color: var(--navy); background: rgba(255, 255, 255, 0.04); }

/* modal and forms */
html[data-theme="dark"] .modal__scrim { background: rgba(4, 7, 10, 0.72); }
html[data-theme="dark"] .modal__panel {
  background: #10161e;
  border-color: var(--line);
  color: var(--navy);
}
html[data-theme="dark"] .modal__head { border-color: var(--line); }
html[data-theme="dark"] .modal__title { color: var(--navy); }
html[data-theme="dark"] .modal__kicker,
html[data-theme="dark"] .modal__close { color: var(--navy-35); }
html[data-theme="dark"] .modal__close:hover { color: var(--navy); }
html[data-theme="dark"] .modal__progress { border-color: var(--line); }
html[data-theme="dark"] .modal__progress li { color: var(--navy-35); border-color: var(--line); }
html[data-theme="dark"] .modal__progress li.is-active { color: var(--navy); }
html[data-theme="dark"] .pane__intro { color: var(--navy-70); }
html[data-theme="dark"] .field__label { color: var(--navy); }
html[data-theme="dark"] .input {
  background-color: #0b1016;
  border-color: var(--line);
  color: var(--navy);
}
html[data-theme="dark"] .input:focus { background-color: #0b1016; border-color: var(--gold); }
/* the select keeps its 5px arrow, so only the fill colour changes */
html[data-theme="dark"] select.input {
  background-color: #0b1016;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html[data-theme="dark"] .input::placeholder { color: rgba(233, 237, 243, 0.3); }
html[data-theme="dark"] select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
}
html[data-theme="dark"] .consent { color: var(--navy-70); }
html[data-theme="dark"] .otp__box {
  background: #0b1016;
  border-color: var(--line);
  color: var(--navy);
}
html[data-theme="dark"] .otp__box:focus { border-color: var(--gold); }
html[data-theme="dark"] .otp__meta,
html[data-theme="dark"] .form__note,
html[data-theme="dark"] .form__legal { color: var(--navy-35); }
html[data-theme="dark"] .unlocked__meta > div { border-color: var(--line-soft); }
html[data-theme="dark"] .unlocked__meta dt { color: var(--navy-35); }
html[data-theme="dark"] .unlocked__meta dd { color: var(--navy); }
html[data-theme="dark"] .unlocked__body { color: var(--navy-70); }
html[data-theme="dark"] .link-btn { color: var(--navy-55); }

/* documentation pages */
html[data-theme="dark"] .doc-hero h1,
html[data-theme="dark"] .doc-body h2,
html[data-theme="dark"] .doc-body h3 { color: var(--navy); }
html[data-theme="dark"] .doc-hero__lede,
html[data-theme="dark"] .doc-body p,
html[data-theme="dark"] .doc-body li { color: var(--navy-70); }
html[data-theme="dark"] .doc-toc { border-color: var(--line); }
html[data-theme="dark"] .doc-toc a { color: var(--navy-55); border-color: var(--line-soft); }
html[data-theme="dark"] .doc-toc a:hover { color: var(--navy); }
html[data-theme="dark"] .doc-specs > div,
html[data-theme="dark"] .doc-note { border-color: var(--line); background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .doc-small,
html[data-theme="dark"] .doc-hero__meta { color: var(--navy-35); }
html[data-theme="dark"] .error__code { color: rgba(233, 237, 243, 0.08); }
html[data-theme="dark"] .contact-link { border-color: var(--line); }

/* the printed object itself stays paper-white: it is a book, not a surface */
html[data-theme="dark"] .book3d__page { box-shadow: none; }

/* The staged book is printed matter: its ink is the print ink in both themes.
   Without this the dark palette re-points --navy-70 to a light grey and the
   interior copy (.inside__note, the colophon rows, page one) turns white on
   white. Everything inside the object keeps the paper palette. */
html[data-theme="dark"] .book3d {
  --navy: #0f2338;
  --navy-soft: #1b3247;
  --navy-70: rgba(15, 35, 56, 0.72);
  --navy-55: rgba(15, 35, 56, 0.55);
  --navy-35: rgba(15, 35, 56, 0.35);
  color: #0f2338;
}
html[data-theme="dark"] .book3d__page,
html[data-theme="dark"] .cover3d__back {
  --gold: #c5a028;
  --gold-warm: #d4af37;
}

/* the navy emblem disappears on a dark surface: use the paper cut */
html[data-theme="dark"] .wordmark__logo { content: url("../img/logo-mark-paper.png"); }

/* 3D inspector object keeps physical paper ink in both light and dark modes */
html[data-theme="dark"] .inspector-book {
  --navy: #0f2338;
  --navy-soft: #1b3247;
  --navy-85: rgba(15, 35, 56, 0.85);
  --navy-70: rgba(15, 35, 56, 0.72);
  --navy-55: rgba(15, 35, 56, 0.55);
  --navy-35: rgba(15, 35, 56, 0.35);
  color: #0f2338;
}
html[data-theme="dark"] .cover__inspect-badge {
  background: rgba(10, 18, 28, 0.94);
  border-color: rgba(209, 180, 119, 0.6);
  box-shadow: 0 10px 26px -4px rgba(0, 0, 0, 0.75), 0 0 20px rgba(209, 180, 119, 0.3);
}