/* Static-site button, badge, and mobile-nav primitives — replaces the DC-runtime
   Button/Badge components with plain CSS so pages need no JS framework to render. */

.btn { font-family: var(--font-body); font-weight: var(--weight-semibold); border-radius: var(--radius-full);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; border: 1px solid transparent; box-shadow: var(--shadow-sm);
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.btn:active { transform: scale(0.97); }
.btn-sm { padding: 8px 18px; font-size: var(--text-sm); }
.btn-md { padding: 11px 24px; font-size: var(--text-base); }
.btn-lg { padding: 14px 30px; font-size: var(--text-md); }
.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { background: var(--color-secondary-hover); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); box-shadow: none; }
.btn-outline:hover { background: var(--color-bg-sunken); }
.btn-ghost { background: transparent; color: var(--color-primary); box-shadow: none; }
.btn-ghost:hover { background: var(--color-bg-sunken); }

.badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.badge-neutral { background: var(--color-bg-sunken); color: var(--color-text-secondary); }
.badge-success { background: var(--color-success); color: #fff; }
.badge-warning { background: var(--color-warning); color: #fff; }
.badge-error { background: var(--color-error); color: #fff; }
.badge-info { background: var(--color-info); color: #fff; }
.badge-accent { background: var(--color-accent); color: #fff; }

/* Responsive header nav: CSS media query stands in for the old isDesktop/isMobile JS state */
.menu-toggle { display: none; border: none; background: transparent; font-size: 26px; color: var(--color-text-primary); cursor: pointer; line-height: 1; padding: 4px; }
.mobile-nav { display: none; }
@media (max-width: 759px) {
  .nav-desktop, .nav-shop-btn { display: none !important; }
  .menu-toggle { display: block; }
  .mobile-nav.open { display: flex; }
}
.mobile-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); flex-direction: column; padding: 10px 8px; z-index: 10; }
.mobile-nav a { padding: 14px 16px; font-size: 16px; font-family: var(--font-body); font-weight: 600; color: var(--color-text-primary); text-decoration: none; border-radius: var(--radius-sm); }