:root {
  --background: 210 40% 96%;
  --foreground: 222 47% 11%;
  --primary: 217 91% 60%;
  --secondary: 160 84% 39%;
  --muted: 215 16% 47%;
  --destructive: 350 82% 52%;
  --border: 214 32% 88%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(217 45% 20% / 0.08);
  --shadow-md: 0 14px 36px hsl(217 45% 20% / 0.12);
  --shadow-lg: 0 22px 60px hsl(217 45% 20% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.35rem;
}

.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 96%;
  --primary: 213 94% 68%;
  --secondary: 158 75% 48%;
  --muted: 215 20% 72%;
  --destructive: 350 91% 66%;
  --border: 217 32% 18%;
  --card: 222 42% 11%;
  --shadow-sm: 0 6px 18px hsl(0 0% 0% / 0.20);
  --shadow-md: 0 14px 36px hsl(0 0% 0% / 0.28);
  --shadow-lg: 0 22px 60px hsl(0 0% 0% / 0.38);
}

* {
  box-sizing: border-box;
}

html {
  background: hsl(var(--background));
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% -10%, hsl(var(--primary) / 0.18), transparent 32rem),
    radial-gradient(circle at 95% 5%, hsl(var(--secondary) / 0.18), transparent 26rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
textarea {
  font: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.icon-button {
  display: inline-grid;
  height: 2.55rem;
  width: 2.55rem;
  place-items: center;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.icon-button:hover {
  transform: translateY(-1px);
  border-color: hsl(var(--primary) / 0.42);
  background: hsl(var(--primary) / 0.08);
}

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 900;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.primary-button {
  border: 1px solid hsl(var(--primary));
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  color: white;
  box-shadow: 0 12px 24px hsl(var(--primary) / 0.24);
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px hsl(var(--primary) / 0.30);
}

.secondary-button {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--primary) / 0.10);
  color: hsl(var(--primary));
}

.secondary-button:hover {
  transform: translateY(-1px);
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.14);
}

.feed-action {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--radius-md);
  color: hsl(var(--muted));
  font-size: 0.85rem;
  font-weight: 900;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.feed-action:hover {
  transform: translateY(-1px);
  background: hsl(var(--primary) / 0.09);
  color: hsl(var(--primary));
}

.feed-action.is-liked {
  background: hsl(var(--destructive) / 0.11);
  color: hsl(var(--destructive));
}

.avatar-gradient {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  color: white;
  font-size: 0.86rem;
  font-weight: 1000;
  letter-spacing: -0.03em;
  box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 0.32), var(--shadow-sm);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: hsl(var(--border) / 0.62);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsl(var(--card) / 0.75), transparent);
  animation: shimmer 1.25s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

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