/* ===========================================================================
   醸誌 Kamoshi — base element styling & helpers
   Light-touch resets so specimen cards and kits inherit the brand voice.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  margin: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* --- Editorial helpers ----------------------------------------------------- */
.km-eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.km-latin { font-family: var(--font-latin); }
.km-display { font-family: var(--font-display); }

/* Vertical writing mode for occasional wa-modern accents */
.km-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* Tate-style index rule */
.km-rule {
  height: 1px;
  background: var(--border-default);
  border: 0;
}

/* --- Component interaction states (inline styles can't do :hover) ---------- */
.km-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.km-btn:active { transform: translateY(1px); }
.km-btn--primary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.km-btn--primary:active { background: var(--accent-press) !important; }
.km-btn--spot:hover { background: var(--spot-hover) !important; border-color: var(--spot-hover) !important; }
.km-btn--ink:hover { background: var(--ai-deep-90) !important; border-color: var(--ai-deep-90) !important; }
.km-btn--secondary:hover { background: var(--sora-soft) !important; }
.km-btn--ghost:hover { background: var(--sora-soft) !important; }
.km-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.km-card-link { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.km-card-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.km-textlink { position: relative; }
.km-textlink::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.km-textlink:hover::after { transform: scaleX(1); }

.km-input:focus-visible { outline: none; border-color: var(--ai-mid); box-shadow: var(--ring); }