@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root {
  --font-sans: "Noto Sans SC", "Inter", ui-sans-serif, system-ui, sans-serif;
  --brand: #ff5c7c;
  --brand-hover: #e84e6d;
  --brand-light: #fff2f4;
}

/* Custom styles for Chinese Manga Web */
body {
  font-family: var(--font-sans);
}

.aspect-[3/4] {
  aspect-ratio: 3/4;
}

.bg-brand { background-color: var(--brand) !important; }
.bg-brand-hover { background-color: var(--brand-hover) !important; }
.bg-brand-light { background-color: var(--brand-light) !important; }
.text-brand { color: var(--brand) !important; }
.border-brand { border-color: var(--brand) !important; }
.hover\:bg-brand:hover { background-color: var(--brand) !important; }
.hover\:bg-brand-hover:hover { background-color: var(--brand-hover) !important; }
.hover\:text-brand:hover { color: var(--brand) !important; }
.focus\:border-brand:focus { border-color: var(--brand) !important; }
.focus\:ring-brand:focus { --tw-ring-color: var(--brand) !important; }
.shadow-brand\/20 { --tw-shadow-color: rgb(255 92 124 / .2); }
.selection\:bg-brand::selection { background: var(--brand); }
.selection\:text-white::selection { color: #fff; }

/* Modern smooth animations */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}