@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 24px;
  --radius-4: 32px;
  --radius-pill: 999px;

  --shadow-warm-soft: 0 18px 38px rgba(0, 0, 0, 0.16);
  --shadow-warm-deep: 0 24px 52px rgba(12, 10, 7, 0.28);

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-toast: 200;
  --texture-grain:
    repeating-linear-gradient(
      115deg,
      rgba(255, 246, 223, 0.024) 0,
      rgba(255, 246, 223, 0.024) 1px,
      transparent 1px,
      transparent 11px
    ),
    repeating-linear-gradient(
      24deg,
      rgba(18, 15, 12, 0.02) 0,
      rgba(18, 15, 12, 0.02) 1px,
      transparent 1px,
      transparent 14px
    );
}

.card,
.cozy-card {
  background: var(--panel, rgba(58, 50, 35, 0.9));
  border: 1px solid var(--border, rgba(197, 169, 119, 0.22));
  border-radius: var(--radius-2);
  padding: var(--space-2);
  box-shadow: var(--shadow-warm-soft);
}

.cozy-skeleton {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border, rgba(197, 169, 119, 0.22));
  border-radius: var(--radius-1);
  background:
    linear-gradient(180deg, rgba(255, 247, 226, 0.08), rgba(255, 247, 226, 0.02)),
    rgba(66, 56, 40, 0.78);
}

.cozy-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 246, 223, 0.2), transparent);
  animation: cozy-skeleton-shimmer 1.35s ease-in-out infinite;
}

.cozy-skeleton--line {
  min-height: 14px;
  border-radius: var(--radius-pill);
}

.cozy-skeleton--line-lg {
  min-height: 20px;
}

.cozy-skeleton--avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.cozy-skeleton--hero {
  min-height: 180px;
  border-radius: var(--radius-3);
}

@keyframes cozy-skeleton-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.prose {
  max-width: 65ch;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: var(--space-3);
  border: 1px dashed var(--border, rgba(197, 169, 119, 0.22));
  border-radius: var(--radius-2);
  color: var(--muted, #c6b59a);
  text-align: center;
}

/* Layout utilities — replace common inline styles in JS renderers */
.row--between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.mt-6 { margin-top: 6px; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mb-6 { margin-bottom: 6px; }