/* Custom Styles for Kokoro Spaces (心的空間) */
/* Strictly 3 Cohesive Fonts: Lora (Editorial Serif), Plus Jakarta Sans (Modern UI Sans), Noto Serif TC (Traditional Chinese Serif) */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Noto+Serif+TC:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --color-linen: #FAF7F2;
  --color-linen-subtle: #F5EFEB;
  --color-stone: #EFE9E0;
  --color-stone-dark: #5C554D;
  --color-sage: #4E6B65;
  --color-sage-dark: #354B46;
  --color-sage-light: #EEF4F2;
  --color-terracotta: #B35E47;
  --color-terracotta-light: #FBF0EB;
  --color-charcoal: #1C2221;
  --color-charcoal-muted: #495152;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', sans-serif;
  color: var(--color-charcoal);
  background-color: var(--color-linen);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  letter-spacing: 0.01em;
}

/* Clear, elegant titles with genuine bold weights (no faux-bold smearing) */
.font-serif-title {
  font-family: 'Lora', 'Noto Serif TC', 'PingFang TC', 'Songti TC', serif;
  letter-spacing: -0.01em;
}

.font-serif-zh {
  font-family: 'Noto Serif TC', 'Lora', 'PingFang TC', 'Songti TC', serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Brand mark font (unified with primary editorial serif) */
.font-brand {
  font-family: 'Lora', 'Noto Serif TC', serif;
  letter-spacing: 0.04em;
}

/* Traditional Chinese typography optimization: Prevent awkward browser italic distortion */
:lang(zh), [lang*="zh"] {
  font-style: normal;
}

/* CJK word breaking vs English natural wrapping */
:lang(zh) .cjk-keep, [lang*="zh"] .cjk-keep {
  word-break: keep-all;
}
:lang(en) .cjk-keep, [lang*="en"] .cjk-keep {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Ambient organic glow */
.ambient-glow {
  background: radial-gradient(circle at 50% 20%, rgba(90, 119, 113, 0.08) 0%, rgba(250, 247, 242, 0) 70%);
}

.ambient-warm-glow {
  background: radial-gradient(circle at 80% 30%, rgba(190, 109, 86, 0.06) 0%, rgba(250, 247, 242, 0) 65%);
}

/* Card hover transitions */
.elevate-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.elevate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(35, 43, 43, 0.08);
}

/* Custom scrollbars for modals */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #F4F0E8;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #C4BFB5;
  border-radius: 9999px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #A6A095;
}

/* Active tab pill styling */
.filter-pill.active {
  background-color: var(--color-sage);
  color: #FFFFFF;
}

/* Soft badge pulses */
@keyframes softPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.pulse-soft {
  animation: softPulse 4s infinite ease-in-out;
}

/* Horizontal scroll styling */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* Full article reading modal (Tailwind CDN preflight strips default typography) */
#articleModalBody {
  color: #44403c;
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: 0.02em;
}
#articleModalBody p { margin: 0 0 1.1em; }
#articleModalBody .article-meta {
  font-size: 0.8rem;
  color: #a8a29e;
  margin-bottom: 1.5em;
}
#articleModalBody strong { color: #1c1917; font-weight: 700; }
#articleModalBody em { font-style: italic; }
#articleModalBody mark {
  background: linear-gradient(transparent 60%, #d9e6d3 60%);
  color: inherit;
}
#articleModalBody a {
  color: #166534;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}
#articleModalBody a:hover { color: #052e16; }
#articleModalBody ol,
#articleModalBody ul { margin: 0 0 1.1em; padding-left: 1.5em; }
#articleModalBody ol { list-style: decimal; }
#articleModalBody ul { list-style: disc; }
#articleModalBody li { margin-bottom: 0.5em; }
#articleModalBody li > p { margin-bottom: 0.4em; }