/**
 * MUYING Coffee visual identity — scoped to .brand-muying (set on <html>
 * for muying builds only via Layout.astro). Loaded as a static stylesheet
 * only in muying builds, so the 88/Boa/rideSWB compiled CSS stays untouched.
 *
 * Pixel source: the legacy muyingcoffee.com single-page site (Tailwind Play
 * CDN + inline <style>). The palette/type ramp below mirrors that config:
 *   muying-50 #FAFAF9 · 100 #F5F5F4 · 200 #E7E5E4 · 300 #D6D3CD · 400 #A8A29E
 *   500 #78716c · 600 #78716c · 700 #57534e · 800 #292524 · 900 #1c1917
 *   brown #3b3024 · green #354f48 · accent #a89f91
 *   Inter 300-600 body · Space Mono 400/700 display · Ma Shan Zheng 木影
 * (muying-200/400/600 had no value in the legacy Tailwind config and fell
 * back to browser defaults; the values above follow the stone ramp they were
 * clearly lifted from.)
 *
 * The utility classes the legacy markup uses (bg-muying-900, font-chinese,
 * shadow-phone, …) are not part of the storefront Tailwind theme, so they
 * are defined here explicitly, scoped under .brand-muying — same approach
 * as public/brand/swb/swb.css.
 */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/brand/muying/fonts/inter-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/brand/muying/fonts/space-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/brand/muying/fonts/space-mono-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/brand/muying/fonts/space-mono-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Ma Shan Zheng';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/brand/muying/fonts/ma-shan-zheng.woff2') format('woff2');
}

/* ------------------------------------------------------------- palette */
.brand-muying {
  --my-50: #fafaf9;
  --my-100: #f5f5f4;
  --my-200: #e7e5e4;
  --my-300: #d6d3cd;
  --my-400: #a8a29e;
  --my-500: #78716c;
  --my-600: #78716c;
  --my-700: #57534e;
  --my-800: #292524;
  --my-900: #1c1917;
  --my-brown: #3b3024;
  --my-green: #354f48;
  --my-accent: #a89f91;
}

html.brand-muying {
  scroll-behavior: smooth;
}

html.brand-muying body {
  background-color: var(--my-50);
  color: var(--my-900);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.brand-muying ::selection {
  background: var(--my-brown);
  color: #fff;
}

/* Custom scrollbar (legacy inline <style>). */
.brand-muying ::-webkit-scrollbar {
  width: 6px;
}
.brand-muying ::-webkit-scrollbar-track {
  background: transparent;
}
.brand-muying ::-webkit-scrollbar-thumb {
  background: var(--my-300);
}
.brand-muying ::-webkit-scrollbar-thumb:hover {
  background: var(--my-700);
}

/* Hide-scrollbar utility for the phone mockups. */
.brand-muying .no-scrollbar::-webkit-scrollbar {
  display: none;
}
.brand-muying .no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ----------------------------------------------------- type utilities */
.brand-muying .font-sans {
  font-family: 'Inter', system-ui, sans-serif;
}
.brand-muying .font-mono {
  font-family: 'Space Mono', ui-monospace, monospace;
}
.brand-muying .font-chinese {
  font-family: 'Ma Shan Zheng', 'Songti SC', serif;
}

/* ---------------------------------------------------- color utilities */
.brand-muying .bg-muying-50 { background-color: var(--my-50); }
.brand-muying .bg-muying-100 { background-color: var(--my-100); }
.brand-muying .bg-muying-200 { background-color: var(--my-200); }
.brand-muying .bg-muying-300 { background-color: var(--my-300); }
.brand-muying .bg-muying-800 { background-color: var(--my-800); }
.brand-muying .bg-muying-900 { background-color: var(--my-900); }
.brand-muying .bg-muying-brown { background-color: var(--my-brown); }
.brand-muying .bg-muying-green { background-color: var(--my-green); }
.brand-muying .bg-muying-accent { background-color: var(--my-accent); }
.brand-muying .bg-muying-900\/90 { background-color: rgba(28, 25, 23, 0.9); }
.brand-muying .bg-muying-brown\/50 { background-color: rgba(59, 48, 36, 0.5); }

.brand-muying .text-muying-300 { color: var(--my-300); }
.brand-muying .text-muying-400 { color: var(--my-400); }
.brand-muying .text-muying-500 { color: var(--my-500); }
.brand-muying .text-muying-600 { color: var(--my-600); }
.brand-muying .text-muying-700 { color: var(--my-700); }
.brand-muying .text-muying-900 { color: var(--my-900); }
.brand-muying .text-muying-accent { color: var(--my-accent); }
.brand-muying .text-muying-green { color: var(--my-green); }

.brand-muying .border-muying-100 { border-color: var(--my-100); }
.brand-muying .border-muying-200 { border-color: var(--my-200); }
.brand-muying .border-muying-300 { border-color: var(--my-300); }
.brand-muying .border-muying-900 { border-color: var(--my-900); }
.brand-muying .border-muying-900\/5 { border-color: rgba(28, 25, 23, 0.05); }

.brand-muying .to-muying-900 { --tw-gradient-to: var(--my-900); }
.brand-muying .to-muying-brown\/50 { --tw-gradient-to: rgba(59, 48, 36, 0.5); }

/* Interactive variants. */
.brand-muying .hover\:bg-muying-50:hover { background-color: var(--my-50); }
.brand-muying .hover\:bg-muying-900:hover { background-color: var(--my-900); }
.brand-muying .hover\:bg-muying-green:hover { background-color: var(--my-green); }
.brand-muying .hover\:border-muying-400:hover { border-color: var(--my-400); }
.brand-muying .hover\:border-muying-900:hover { border-color: var(--my-900); }
.brand-muying .hover\:text-muying-500:hover { color: var(--my-500); }
.brand-muying .hover\:text-muying-900:hover { color: var(--my-900); }
.brand-muying .hover\:text-muying-brown:hover { color: var(--my-brown); }
.brand-muying .group:hover .group-hover\:text-muying-900 { color: var(--my-900); }
.brand-muying .group:hover .group-hover\:text-muying-brown { color: var(--my-brown); }
.brand-muying .peer:checked ~ .peer-checked\:bg-muying-50 { background-color: var(--my-50); }
.brand-muying .peer:checked ~ .peer-checked\:bg-muying-900 { background-color: var(--my-900); }
.brand-muying .peer:checked ~ .peer-checked\:border-muying-900 { border-color: var(--my-900); }
.brand-muying .focus\:border-muying-900:focus { border-color: var(--my-900); }

/* Phone-mockup shadow (legacy tailwind boxShadow.phone). */
.brand-muying .shadow-phone {
  box-shadow:
    0 50px 100px -20px rgba(50, 50, 93, 0.25),
    0 30px 60px -30px rgba(0, 0, 0, 0.3),
    inset 0 -2px 6px 0 rgba(10, 37, 64, 0.35);
}

/* ---------------------------------------------------------- animations */
.brand-muying .fade-in-up {
  animation: myFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(40px);
}
.brand-muying .fade-in {
  animation: myFadeIn 1.5s ease-out forwards;
  opacity: 0;
}
@keyframes myFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes myFadeIn {
  to { opacity: 1; }
}
.brand-muying .delay-100 { animation-delay: 0.1s; }
.brand-muying .delay-200 { animation-delay: 0.2s; }
.brand-muying .delay-300 { animation-delay: 0.3s; }
.brand-muying .delay-500 { animation-delay: 0.5s; }

.brand-muying .animate-fade-in {
  animation: myAnimateFadeIn 0.4s ease-out both;
}
@keyframes myAnimateFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Blog drop cap (legacy first-letter: utilities). */
.brand-muying .my-dropcap::first-letter {
  font-size: 3rem;
  float: left;
  margin-right: 1rem;
  font-family: 'Space Mono', ui-monospace, monospace;
  color: var(--my-900);
}