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

:root {
  --bg-main: #f8f6f2;
  --bg-card: #ffffff;
  --bg-subtle: #f2efe9;
  --border-subtle: #e6e2d8;
  --border-focus: #c2672e;
  --text-main: #2b2622;
  --text-muted: #736b63;
  --text-light: #9c948a;
  --accent-warm: #c2672e;
  --accent-hover: #ab5722;
  --accent-glow: rgba(194, 103, 46, 0.18);
}

body {
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  overflow-x: hidden;
}

.font-serif-sc {
  font-family: 'Noto Serif SC', serif;
}

/* Custom Warm Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f0ece4;
}

::-webkit-scrollbar-thumb {
  background: #d4cec4;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b5ada2;
}

/* Paper / Warm Card Panels */
.warm-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 20px -2px rgba(80, 70, 60, 0.04), 0 2px 6px -1px rgba(80, 70, 60, 0.02);
}

.warm-panel-subtle {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}

.warm-input {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.warm-input:focus {
  background: #ffffff;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}

/* Theme Scene Card Active State */
.scene-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-card:hover {
  transform: translateY(-2px);
  border-color: #d1c7b8;
  box-shadow: 0 6px 16px -2px rgba(80, 70, 60, 0.08);
}

.scene-card.active {
  border-color: var(--accent-warm) !important;
  background: #fdf8f4 !important;
  box-shadow: 0 0 0 2px var(--accent-warm), 0 8px 20px -4px rgba(194, 103, 46, 0.15) !important;
}

/* Aspect Ratio & Resolution Buttons */
.option-btn {
  transition: all 0.2s ease-in-out;
}

.option-btn.active {
  border-color: var(--accent-warm) !important;
  background: #fcf4ee !important;
  color: var(--accent-warm) !important;
  box-shadow: 0 0 0 1px var(--accent-warm);
}

/* Warm Elegant Loading Shimmer */
@keyframes warmShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.warm-skeleton-shimmer {
  background: linear-gradient(
    90deg,
    #f2efe9 25%,
    #e8e4dc 50%,
    #f2efe9 75%
  );
  background-size: 200% 100%;
  animation: warmShimmer 2s infinite linear;
}

/* Pulse Animation */
@keyframes warmPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.warm-pulse {
  animation: warmPulse 2.5s infinite ease-in-out;
}