/* blommer — the paper-craft layer over Krönika's editorial machinery.
 *
 * Design intent (brand/identity.md): the chrome finally speaks the same
 * cut-paper language as the Codex image plates. One signature device:
 * HARD-EDGED OFFSET SHADOWS (zero blur — the flat shadows inside the
 * illustrations) under plates and primary CTAs, which physically press
 * into their shadow on hover. Everything else stays Krönika: dotted
 * rules, typewriter mono, quiet ink.
 *
 * Palette comes from design.knobs in site.config.json — this file only
 * speaks in tokens so a future vibe swap still re-skins the site.
 */

:root {
  /* The paper-craft shadow: flat, warm, never blurred. */
  --bl-shadow-ink: color-mix(in srgb, var(--kr-ink) 13%, transparent);
  --bl-shadow-accent: color-mix(in srgb, var(--kr-rea) 30%, transparent);
}

/* == The signature: plates sit ON the paper, not in it ================ */

.kr-plate {
  box-shadow: 0.45rem 0.45rem 0 var(--bl-shadow-ink);
  border-radius: var(--kr-r-md);
}
.kr-plate img {
  border-radius: inherit;
}

/* == Buttons press into their shadow ================================== */

.kr-btn--ink {
  box-shadow: 0.3rem 0.3rem 0 var(--bl-shadow-accent);
}
.kr-btn--ink:hover {
  background: var(--kr-rea);
  color: var(--kr-paper);
  transform: translate(2px, 2px);
  box-shadow: 0.15rem 0.15rem 0 var(--bl-shadow-accent);
}
.kr-btn--ink:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--bl-shadow-accent);
}

/* The disclosure jump — the conversion shortcut wears the accent. */
.kr-disclosure__jump {
  color: var(--kr-rea);
  box-shadow: inset 0 0 0 1px var(--kr-rea);
}
.kr-disclosure__jump:hover {
  color: var(--kr-paper);
  background: var(--kr-rea);
}

/* == FAQ: quiet answer cards (the AEO surface deserves the best UX) === */

.kr-faq {
  background: var(--kr-panel);
  border-radius: var(--kr-r-md);
  padding: 1rem 1.25rem;
}
.kr-faq__marker {
  color: var(--kr-rea);
}

/* == Prose data tables: verified facts in a warm ledger =============== */

.kr-article__body table,
.kr-band table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.kr-article__body th,
.kr-band th {
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--kr-pencil);
  background: var(--kr-panel);
  padding: 0.7em 0.9em;
  border-bottom: var(--kr-rule-strong);
}
.kr-article__body td,
.kr-band td {
  padding: 0.65em 0.9em;
  border-bottom: var(--kr-rule);
  vertical-align: top;
}
.kr-article__body tr:last-child td,
.kr-band tr:last-child td {
  border-bottom: none;
}
.kr-article__body table tbody tr:hover td,
.kr-band table tbody tr:hover td {
  background: color-mix(in srgb, var(--kr-panel) 55%, transparent);
}

/* == Small delights, one budget ====================================== */

/* Selection turns blommer-pink — the reader touches the brand. */
::selection {
  background: var(--kr-rea);
  color: var(--kr-paper);
}

/* Focus rings speak accent, not ink — visible on every ground. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--kr-rea);
  outline-offset: 2px;
}

/* Statement bands (the slogan) get tissue-paper ground + display voice. */
.kr-band--statement {
  background: var(--kr-panel);
}

/* == Restraint =======================================================
 * No transforms for readers who ask for calm. The shadows stay (they
 * are ground, not motion); the presses go.
 */
@media (prefers-reduced-motion: reduce) {
  .kr-btn--ink:hover,
  .kr-btn--ink:active {
    transform: none;
  }
}