/* ======================================================================
 * Larch Design System — global stylesheet entry point.
 *
 * Consumers link THIS one file. It is an @import manifest only; every
 * token and @font-face lives in the files below. Do not add rules here.
 * ====================================================================== */
@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";

/* Mobile nav (baked panel; toggle in nav-toggle.js). Lifted verbatim from
   the handoff's mobile-nav.js so behavior and look are identical. */
.mnav-btn { display: none; }
.mnav-panel { display: none; }
@media (max-width: 1020px) {
  .mnav-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; background: transparent;
    border: 1px solid rgba(251,250,248,0.25); border-radius: 999px; cursor: pointer; }
  .mnav-btn span { display: block; height: 1.5px; background: var(--larch-snow, #FBFAF8); border-radius: 1px; transition: transform 140ms ease, opacity 140ms ease; }
  body.mnav-open .mnav-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.mnav-open .mnav-btn span:nth-child(2) { opacity: 0; }
  body.mnav-open .mnav-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .mnav-panel { display: none; background: var(--larch-midnight, #0E1621); border-top: 1px solid rgba(251,250,248,0.10); }
  body.mnav-open .mnav-panel { display: block; }
  .mnav-panel ul { list-style: none; margin: 0; padding: 10px 40px 22px; display: block; }
  .mnav-panel li { border-bottom: 1px solid rgba(251,250,248,0.08); }
  .mnav-panel li:last-child { border-bottom: 0; }
  .mnav-panel a { display: block; padding: 14px 2px; font-size: 16px; font-weight: 700;
    color: var(--larch-muted, #9AA5B1); text-decoration: none; }
  .mnav-panel a.active { color: var(--larch-snow, #FBFAF8); }
  .mnav-panel a.active::after { content: ""; display: inline-block; width: 22px; height: 1.5px;
    background: var(--larch-gold, #D4A04B); vertical-align: middle; margin-left: 12px; }
}