:root {
  --bg-primary: #F4EFE3;
  --bg-secondary: #EAE2CE;
  --card-bg: #FAF6EC;
  --text-main: #2B2D5C;
  --text-muted: #5C5346;
  --accent-coral: #E05A47;
  --accent-mustard: #E8A838;
  --accent-teal: #2D8C82;
  --outline-indigo: #2B2D5C;
  --outline-brown: #4A2C1D;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  transition: background-color 0.6s ease, color 0.4s ease;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  /* Warm toothy paper fibre background */
  background-image:
    radial-gradient(circle at 20% 20%, rgba(232, 168, 56, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(224, 90, 71, 0.07) 0%, transparent 50%),
    repeating-linear-gradient(
      0deg,
      rgba(166, 148, 120, 0.04) 0px,
      rgba(166, 148, 120, 0.04) 1px,
      transparent 1px,
      transparent 4px
    );
}

/* Typography Hierarchy (Crayon Picture Book: Gaegu + Patrick Hand + Plus Jakarta Sans) */
.font-crayon-title {
  font-family: 'Gaegu', cursive, sans-serif;
}

.font-crayon-book {
  font-family: 'Patrick Hand', cursive, sans-serif;
}

.font-mono-tech {
  font-family: 'JetBrains Mono', monospace;
}

/* Picture-Book Page Card Surfaces (Indigo/Brown Crayon Borders, NEVER black) */
.paper-card {
  background: var(--card-bg);
  border: 2.5px solid #2B2D5C;
  box-shadow: 6px 6px 0px rgba(43, 45, 92, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.paper-card:hover {
  border-color: #E05A47;
  box-shadow: 8px 8px 0px rgba(224, 90, 71, 0.2);
}

.paper-panel {
  background: #FAF6EC;
  border: 2.5px solid #4A2C1D;
  box-shadow: 6px 6px 0px rgba(74, 44, 29, 0.12);
}

.paper-nav {
  background: rgba(244, 239, 227, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2.5px dashed rgba(43, 45, 92, 0.22);
}

/* Crayon Highlighted Cultural Term Badge (Fitur 2 — Stable Layout Bounds) */
.gold-term {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #2B2D5C;
  font-weight: 700;
  cursor: pointer;
  padding: 0.1rem 0.55rem;
  margin: 0 0.12rem;
  border-radius: 0.5rem;
  background: rgba(232, 168, 56, 0.28);
  border: 2px solid #E8A838;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 2px 2px 0px rgba(232, 168, 56, 0.35);
  vertical-align: baseline;
}

.gold-term:hover,
.gold-term:focus-visible {
  background: rgba(232, 168, 56, 0.48);
  border-color: #E05A47;
  box-shadow: 3px 3px 0px rgba(224, 90, 71, 0.35);
  outline: none;
}

/* Shimmer Skeleton Loading Animation */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(43, 45, 92, 0.04) 0%,
    rgba(232, 168, 56, 0.18) 50%,
    rgba(43, 45, 92, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Audio Player Pulse */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 90, 71, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(224, 90, 71, 0); }
}

.playing-glow {
  animation: pulseGlow 2s infinite ease-in-out;
}

/* Ambient Particle Canvas */
#ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* Reduced Motion Accessibility Compliance */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}